Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front End Badassery with Sass
Search
Jessica Eldredge
September 15, 2012
Design
9
390
Front End Badassery with Sass
An intro to the features of Sass/SCSS
Jessica Eldredge
September 15, 2012
Tweet
Share
More Decks by Jessica Eldredge
See All by Jessica Eldredge
Prototyping Layout with CSS Grid - RevolutionConf 2018
jessabean
1
320
Prototyping Layout with CSS Grid - Refresh DC
jessabean
1
420
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k
Other Decks in Design
See All in Design
How to get a Tiger to Tulsa
mcduckyart
0
110
問いの変遷
iflection
0
170
CMS管理画面のアクセシビリティ
magi1125
8
2.2k
Storyboard Honey
rocioparronrubio
0
280
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
110
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
Haley's adventure chase
ivettetwin
0
240
#Dubois Challenge 2025: Economics
ajstarks
0
130
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
Bulletproof Design System with TypeScript
takanorip
6
3.6k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.6k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Faster Mobile Websites
deanohume
307
31k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Facilitating Awesome Meetings
lara
54
6.5k
Transcript
FRONT END BADASSERY WITH SASS Jessica Eldredge RailsGirls DC 2012
“I don’t like the green. Can we change it?”
CSS IS A PAIN
it lacks VARIABLES it lacks FUNCTIONS it’s LONG it’s REPETITIVE
ENTER SASS a front end developer’s dream
SASS OR SCSS?
TWO DIFFERENT SYNTAXES
VARIABLES
NESTING
MIXINS
EXTEND
COLOR FUNCTIONS
MATH
HELPFUL TIPS
LIMIT YOUR NESTING no more than 2 levels
USE @IMPORT no extra HTTP requests!
SEPARATE MIXINS keep a mixin library
USE PARTIALS think in terms of MODULES build up your
LIBRARY
NEXT STEPS
FRAMEWORKS, LIBRARIES Compass compass-style.org Bourbon thoughtbot.com/bourbon
LEARN MORE SCSS Sass Documentation thesassway.com Chris Eppstein @chriseppstein github.com/chriseppstein
OTHER PREPROCESSORS LESS lesscss.org Stylus learnboost.github.com/stylus
GO FORTH, BADASS
KEEP IN TOUCH!
[email protected]
@jessabean github.com/jessabean