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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Jessica Eldredge
September 15, 2012
Design
9
400
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
340
Prototyping Layout with CSS Grid - Refresh DC
jessabean
1
460
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.4k
Other Decks in Design
See All in Design
はじめての演奏会フライヤーデザイン
chorkaichan
1
220
デザイナーとエンジニアで 同じ山に登ろう
moco1013
0
140
ドルちゃん
design_dolphins
0
550
【サイバーエージェント】Creative Switch 会社説明資料
cyberagent_creators
0
5.1k
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
300
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
380
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
300
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
0
480
Liquid GlassとApp Intents
touyou
0
800
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
890
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
140
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
490
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
5k
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
440
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
120
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Building an army of robots
kneath
306
46k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
290
Making Projects Easy
brettharned
120
6.6k
4 Signs Your Business is Dying
shpigford
187
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
3.9k
GraphQLとの向き合い方2022年版
quramy
50
14k
Deep Space Network (abreviated)
tonyrice
0
48
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