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
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
150
マンガで分かるサービスデザインガイドライン
senryakuka
1
610
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
520
発表資料テンプレート / My slide template
thatblue
0
200
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
LLMによるRAG評価用合成テストデータの生成
licux
6
680
利用者が離れないUX/UIデザイン　長く使われる業務アプリデザインのポイント
ncdc
5
440
portfolio2025_kanakoohata
kanako106
0
670
Illustrator2025がやってきた！私が好きな新機能
hamko1114
0
110
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
200

Featured

See All Featured
Building an army of robots
kneath
302
45k
Designing for Performance
lara
604
68k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Documentation Writing (for coders)
carmenintech
67
4.6k
Typedesign – Prime Four
hannesfritz
40
2.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Thoughts on Productivity
jonyablonski
69
4.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k

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