Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front End Badassery with Sass

Jessica Eldredge
September 15, 2012
Design
9
380

Front End Badassery with Sass

An intro to the features of Sass/SCSS

Jessica Eldredge

September 15, 2012
Tweet

More Decks by Jessica Eldredge

See All by Jessica Eldredge
Prototyping Layout with CSS Grid - RevolutionConf 2018
jessabean
1
300
Prototyping Layout with CSS Grid - Refresh DC
jessabean
1
390
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k

Other Decks in Design

See All in Design
【デザイン初め新年会2025｜01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
ネットワークセキュリティ科 学科紹介
sklbj_unz
0
160
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
870
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
230
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
210
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
majimasachi
0
320
(第１回) アーキテクト・テックリード育成講座
masakaya
0
160
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
ZKK_001.pdf
nicholaspegu
0
1.5k
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
デザイナーのお仕事（UI/UX GRAPHIC GROUP）
mirrativ
0
110

Featured

See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Six Lessons from altMBA
skipperchong
27
3.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Making Projects Easy
brettharned
116
6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k

Transcript

  1. FRONT END BADASSERY WITH SASS Jessica Eldredge RailsGirls DC 2012

  2. “I don’t like the green. Can we change it?”

  3. CSS IS A PAIN

  4. it lacks VARIABLES it lacks FUNCTIONS it’s LONG it’s REPETITIVE

  5. ENTER SASS a front end developer’s dream

  6. SASS OR SCSS?

  7. TWO DIFFERENT SYNTAXES

  8. VARIABLES

  9. NESTING

  10. MIXINS

  11. EXTEND

  12. COLOR FUNCTIONS

  13. MATH

  14. HELPFUL TIPS

  15. LIMIT YOUR NESTING no more than 2 levels

  16. USE @IMPORT no extra HTTP requests!

  17. SEPARATE MIXINS keep a mixin library

  18. USE PARTIALS think in terms of MODULES build up your

    LIBRARY

  19. NEXT STEPS

  20. FRAMEWORKS, LIBRARIES Compass compass-style.org Bourbon thoughtbot.com/bourbon

  21. LEARN MORE SCSS Sass Documentation thesassway.com Chris Eppstein @chriseppstein github.com/chriseppstein

  22. OTHER PREPROCESSORS LESS lesscss.org Stylus learnboost.github.com/stylus

  23. GO FORTH, BADASS

  24. KEEP IN TOUCH! [email protected] @jessabean github.com/jessabean