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
420
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k
Other Decks in Design
See All in Design
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
580
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
290
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
390
UXデザインはなぜ定着しないのか?
designstudiopartners
0
790
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
730
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
120
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
900
ポートフォリオ_webデザイナー
nami_webdesigner
0
120
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
500
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.4k
アクセシビリティに取り組むメリット
magi1125
1
220
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Documentation Writing (for coders)
carmenintech
72
4.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Agile that works and the tools we love
rasmusluckow
329
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
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! jessica.avison@gmail.com @jessabean github.com/jessabean