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
370
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
370
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k
Other Decks in Design
See All in Design
太田博三(@usagisan2020)
otanet
0
140
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
270
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
0
870
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
190
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
400
Tataki Ryu
olgastoryboard
0
140
Speed Design
sergeychernyshev
23
540
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
380
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
6
1.5k
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
170
ZOZO CDO Office Design
zozodevelopers
PRO
1
300
Fleet Gas Station
joshtang
0
130
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
What's new in Ruby 2.0
geeforr
342
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
26
700
Become a Pro
speakerdeck
PRO
24
4.9k
A Philosophy of Restraint
colly
203
16k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Faster Mobile Websites
deanohume
304
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.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