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
400
9

Front End Badassery with Sass

An intro to the features of Sass/SCSS

Avatar for Jessica Eldredge

Jessica Eldredge

September 15, 2012

More Decks by Jessica Eldredge

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

Other Decks in Design

See All in Design
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
130
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
590
デザインするために「多様性」について考える
Avatar for なつ iflection
1
300
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
140
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
1
460
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
380
第18回サイゼミ
Avatar for LW lw
1
3.7k
hicard_credential_202601
Avatar for hicard hicard
0
220
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
Avatar for 株式会社NIJIBOX nbkouhou
2
320
「バイブコーディングって何？」から始まった、 AIとの一年間と、その先のこと
Avatar for 瀬戸英晴 seto
0
450
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1.1M
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.8k

Featured

See All Featured
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
140
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
340
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
980
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.6k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
330
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
430
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k

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