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
370
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
300
Prototyping Layout with CSS Grid - Refresh DC
jessabean
1
360
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k
Other Decks in Design
See All in Design
Les petites aventures de CSS, saison 2024
goetter
2
3.8k
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
1
460
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
12
5.5k
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
40
23k
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
690
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
310
Mitra Manual
nnidhz
0
180
Baby Bear Genius
yvonnehsuanho
PRO
0
630
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
1.4k
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
970
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.7k
ZOZO CDO Office Design
zozodevelopers
PRO
1
150
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
For a Future-Friendly Web
brad_frost
174
9.3k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
What the flash - Photography Introduction
edds
67
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Embracing the Ebb and Flow
colly
83
4.4k
Docker and Python
trallard
39
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
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