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

Front End Badassery with Sass

Avatar for Jessica Eldredge Jessica Eldredge
September 15, 2012
Design
9
390

Front End Badassery with Sass

An intro to the features of Sass/SCSS
Avatar for Jessica Eldredge

Jessica Eldredge

September 15, 2012
Tweet

More Decks by Jessica Eldredge

See All by Jessica Eldredge
Prototyping Layout with CSS Grid - RevolutionConf 2018
Avatar for Jessica Eldredge jessabean
1
310
Prototyping Layout with CSS Grid - Refresh DC
Avatar for Jessica Eldredge jessabean
1
400
Sketchnoting: Creative Notes for Technical Content
Avatar for Jessica Eldredge jessabean
7
1.3k

Other Decks in Design

See All in Design
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
Avatar for Shigeyuki Kameda kamechi7222222
0
340
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
890
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
Avatar for Hajime Kato hjmkth
1
480
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
Avatar for Masahiko Sakakibara rdlabo
1
120
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
Avatar for Takehiro KAWASE tkhr_kws
3
330
Cards | Storyboards
Avatar for Gio Fortunato giofortuna_story
0
200
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
Avatar for YurufuwaKiyoshi kiyoshifuwa
0
270
Дизайн современной услуги с Картой процесса-опыта
Avatar for Andrew Shapiro ashapiro
0
170
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
310
freee + Product Design FY25Q4
Avatar for freee freee
4
13k
RAKSUL_DESIGN_DECK_20250319
Avatar for RAKSUL raksulrecruiting
0
190
私とデザインの10年
Avatar for なつ iflection
0
110

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.5k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
13k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
91
6k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.2k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.3k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
21k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.3k
It's Worth the Effort
Avatar for 3n 3n
184
28k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k

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