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
380
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k

Other Decks in Design

See All in Design
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
430
デザインシステム構築の進め方　基本から実践まで、具体的な手順を徹底解説
ncdc
1
360
Slip N Slime - Character Design Ideation
thebogheart
0
350
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
160
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4k
Design System for training program
mct
0
310
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
230
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.3k
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
120
Карта реализации историй — убийца USM
ashapiro
0
300
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
330
最速[要出典]アクセシビリティチェック
magi1125
2
160

Featured

See All Featured
A Philosophy of Restraint
colly
203
16k
BBQ
matthewcrist
85
9.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
It's Worth the Effort
3n
183
28k
The Invisible Side of Design
smashingmag
299
50k
Faster Mobile Websites
deanohume
305
30k
Facilitating Awesome Meetings
lara
51
6.2k
What's in a price? How to price your products and services
michaelherold
244
12k
jQuery: Nuts, Bolts and Bling
dougneiner
62
7.6k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Producing Creativity
orderedlist
PRO
343
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k

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