Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Other Decks in Design

See All in Design
泥臭く語るUIデザイン会｜ホワイトボードチャレンジ【RAMEN TECH 2026】
Avatar for @Garyuten garyuten
1
230
Spectrum Tokyo Meetup #26「できることが増えた時、デザイナーは何に時間を使うべきか」
Avatar for Muture muture
PRO
1
360
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
Avatar for たと ottatto
3
1.9k
2026/8/20　Polaris15周年イベント 『共創の場をつくる』 〜 誰もが『心地よく暮らし、心地よくはたらく』ことを選択できる社会へ 〜 関係性から地域をつくりなおす共創の土壌づくり 〜リビングラボの事例を通じて〜
Avatar for Kimura Atsunobu a2k
0
110
Webブラウザで動く
VJツールをつくる
Avatar for akirafukuoka akirafukuoka
0
130
デザインハーネスをつくるハーネス｜誰でも自社らしいデザインをつくれるようにする仕組み
Avatar for Akari Katakai katakai
0
1.4k
自社プロダクトのUIをAIが再現するデザインビルドシステム
Avatar for toy toy1618
0
1.4k
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
520
20260802東京都市大学オープンキャンパス授業
Avatar for Kimura Atsunobu a2k
0
110
分裂するデザイン、取り残される空間—インクルーシブデザインスタジオが建築をやる理由
Avatar for インクルーシブデザインスタジオCULUMU culumu
0
170
Look Dev Meetup #50
Avatar for Baku Hashimoto baku89
1
530
From Desktop to Spatial Interfaces UX Design Implications of Evolving Interaction Paradigms
Avatar for h.crane hcrane
0
130

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
940
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
67k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.7k
Building an army of robots
Avatar for Kyle Neath kneath
307
47k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
2
730
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.4k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
43k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
480
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
310

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