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
420
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
500
Sketchnoting: Creative Notes for Technical Content
Avatar for Jessica Eldredge jessabean
7
1.4k

Other Decks in Design

See All in Design
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
5.8k
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
Avatar for kgsi kgsi
0
840
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
1.8k
AI時代、デザイナーの価値はどこに？
Avatar for Ryotaro Takahashi tararira
2
1.9k
分散するデザイン組織をつなぐ　デザインミートアップの取り組み/nikkei-tech-talk49
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
1
180
Rethinking IFUs: What Board Game Rulebooks Contribute to IFU Usability
Avatar for Chris Hass deadlinepoet
0
360
開発・制作におけるUI・UXデザインの重要性について～UI・UXデザインってなんだろう～
Avatar for yomogi_sakura yamasaku
0
200
デザインの文脈を理解する：エンジニアがデザインカンファレンスに参加して得た学びと気づき
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
280
もっともらしさ生成器と暮らす – AI懐疑派の試行錯誤
Avatar for sekig(ojiee) sekiguchiy
0
150
デザインワークフローの最前線。 ログラスでのAI活用の現在地
Avatar for Kaori Ueda ukaoli
1
2k
kintone開発における​ライターの役割の変化​〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
Avatar for keroyama keroyama
0
190
【CEDEC2026】アートとゲームデザインをつなぐVFX設計『GRANBLUE FANTASY: Relink - Endless Ragnarok』における表現と可読性の両立
Avatar for Cygames, Inc. cygames
PRO
1
1.1k

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
320
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
550
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
260
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
560
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
320
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
460
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
180
Side Projects
Avatar for Sacha Greif sachag
455
43k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k

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