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
380
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
390
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k
Other Decks in Design
See All in Design
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
150
マンガで分かるサービスデザインガイドライン
senryakuka
1
610
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
520
発表資料テンプレート / My slide template
thatblue
0
200
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
LLMによるRAG評価用合成テストデータの生成
licux
6
680
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
440
portfolio2025_kanakoohata
kanako106
0
670
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
200
Featured
See All Featured
Building an army of robots
kneath
302
45k
Designing for Performance
lara
604
68k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Documentation Writing (for coders)
carmenintech
67
4.6k
Typedesign – Prime Four
hannesfritz
40
2.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Thoughts on Productivity
jonyablonski
69
4.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
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