Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Front End Badassery with Sass

Avatar for Jessica Eldredge Jessica Eldredge
September 15, 2012
Design
420
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
360
Prototyping Layout with CSS Grid - Refresh DC
Avatar for Jessica Eldredge jessabean
1
510
Sketchnoting: Creative Notes for Technical Content
Avatar for Jessica Eldredge jessabean
7
1.4k

Other Decks in Design

See All in Design
Where Imagination Ends AI Begins
Avatar for R-524 r5ni4
0
440
技術に明るくない人が技術を選ぶために
Avatar for moco moco1013
0
120
20260422_Midosuji_Tech
Avatar for Takuya Yonezawa takuyay0ne
2
130
[Unity] VAT×VFX Graphがいま個人的にアツイという話
Avatar for sakiama sakiyama
0
110
日経電子版を支えていく Kasane Design System
Avatar for Taito Tanaka taitotnk
0
400
Jun Wei | Information Design & Presentation Portfolio
Avatar for Wong Jun Wei wjw100788
PRO
0
130
エンジニア経験0のデザイナーが アプリを0からリリースまで 作ってみる
Avatar for 都村　美帆 abokadotyann
2
310
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
320
StartDesignEngineering
Avatar for uchiyama886 uchiyama886
1
140
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
Avatar for NishaMe nishame
1
1.5k
【2026】ポートフォリオ_大坪明日香
Avatar for tsubo52 tsubo52
0
110
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
Avatar for こぎそ / Shinichi Kogiso kgsi
0
940

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Side Projects
Avatar for Sacha Greif sachag
456
43k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
570
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
It's Worth the Effort
Avatar for 3n 3n
188
29k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
560
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
370
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k

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