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

Front End Badassery with Sass

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Jessica Eldredge Jessica Eldredge
September 15, 2012
Design
410
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
350
Prototyping Layout with CSS Grid - Refresh DC
Avatar for Jessica Eldredge jessabean
1
480
Sketchnoting: Creative Notes for Technical Content
Avatar for Jessica Eldredge jessabean
7
1.4k

Other Decks in Design

See All in Design
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
250
つくり方を変えていく | change-how-we-build
Avatar for mottox2 mottox2
2
1.3k
改正JISを見据えた、企業のアクセシビリティ対応ロードマップ
Avatar for Yu Morita securecat
1
390
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
310
「親切なオンボーディング」 が招く罠　ー　AI時代のUXデザイン
Avatar for 小神 godlingkogami
0
120
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
Avatar for Yu Morita securecat
1
180
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
11
14k
Frontier
Avatar for Renny Wang rwang05
0
160
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
920
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
140
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
360
デザインの文脈を理解する：エンジニアがデザインカンファレンスに参加して得た学びと気づき
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
220

Featured

See All Featured
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
400
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
310
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.6k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
130
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
280
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
62
44k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
430

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