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

Front End Badassery with Sass

Avatar for Jessica Eldredge Jessica Eldredge
September 15, 2012
Design
9
390

Front End Badassery with Sass

An intro to the features of Sass/SCSS

Avatar for Jessica Eldredge

Jessica Eldredge

September 15, 2012
Tweet

More Decks by Jessica Eldredge

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

Other Decks in Design

See All in Design
BPStudy#213〜ビジネスアナリシスとDDD（ドメイン駆動設計）パネルディスカッション資料 / BPStudy213-panel
Avatar for haru860 haru860
0
490
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
130
読書シェア会 vol.5 / Yumemi.grow 20250526
Avatar for Rakus_Dev rakus_dev
0
1.8k
新卒の目から見たサイボウズのデザイン組織
Avatar for 小林諒大 ryota5884
0
190
企画を動かすデザイナーの思考！「広げて絞る」アプローチ。
Avatar for Hikida Kan hikidakan
0
180
文字コントラストを改めて考える / Reevaluating Text Contrast
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
550
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
170
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
140
ランドマークが光る！季節を彩るナビ体験 - Mobility Night #3 -
Avatar for tetsuya kitauji kitau
0
130
Design Studio Deck | インクルーシブデザインスタジオCULUUM
Avatar for インクルーシブデザインスタジオCULUMU culumu
3
4.2k
Yumika Yamada Portfolio
Avatar for Yumii yumii
0
1.7k
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
3
1.4k

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.8k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
680
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
11
880
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6.1k
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k

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