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

Front End Badassery with Sass

Jessica Eldredge
September 15, 2012
Design
9
370

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

Other Decks in Design

See All in Design
Dreamia
elsh
0
170
Fleet Gas Station
joshtang
0
140
ENEOS社事例｜アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
270
Design System for training program
mct
0
280
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
890
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
550
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
ZOZO CDO Office Design
zozodevelopers
PRO
1
450
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.1k
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
330
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
280
Haruki_Konaka_Portforio.pdf
haruki556
0
650

Featured

See All Featured
Become a Pro
speakerdeck
PRO
25
5k
A Tale of Four Properties
chriscoyier
156
23k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
The Invisible Side of Design
smashingmag
298
50k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Scaling GitHub
holman
458
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k

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