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
430
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k
Other Decks in Design
See All in Design
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.5k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
130
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
430
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
portfolio.pdf
onof003
0
150
株式会社バクタム 会社説明資料
bactum
0
290
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
490
CursorでAI活用のナレッジベースを構築する
kanzaki
0
640
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
440
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
650
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Site-Speed That Sticks
csswizardry
10
800
It's Worth the Effort
3n
187
28k
A Tale of Four Properties
chriscoyier
160
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Thoughts on Productivity
jonyablonski
69
4.8k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Scaling GitHub
holman
463
140k
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