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
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
Dive Deep into Communication
yomtsu
0
210
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
370
TUNAG BOOK 2024
stmn
0
470
Tableau曲線表現講座(2024.11.21)
cielo1985
0
250
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
ZKK_001.pdf
nicholaspegu
0
1.5k
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
280
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120

Featured

See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
The Language of Interfaces
destraynor
156
24k
Automating Front-end Workflow
addyosmani
1367
200k
How to Ace a Technical Interview
jacobian
276
23k
The World Runs on Bad Software
bkeepers
PRO
67
11k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Writing Fast Ruby
sferik
628
61k
Docker and Python
trallard
44
3.3k

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