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
9
400

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
340
Prototyping Layout with CSS Grid - Refresh DC
Avatar for Jessica Eldredge jessabean
1
460
Sketchnoting: Creative Notes for Technical Content
Avatar for Jessica Eldredge jessabean
7
1.4k

Other Decks in Design

See All in Design
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
180
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
470
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
740
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
510
Treasure_Hunting
Avatar for Sol Metts solmetts
0
320
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
590
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1.1k
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
680
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
350
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
360
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
180
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
130

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.8k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.7k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
190
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
270
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
220
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.7k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
120

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