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
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
120
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
Them Middle School Kids Pitch
stevie_vee
0
140
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
300
Карта реализации историй. Технология осмысленной работы с детальными требованиями
ashapiro
0
120
CursorでAI活用のナレッジベースを構築する
kanzaki
0
670
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
330
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
160
Memory Man v3 (WIP)
storybychad
PRO
0
2.6k
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
810
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.5k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
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