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
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
minpaku-community-scrum-patterns
norinity1103
1
460
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
460
「UXとUIの違い」v2
shirasu3
0
250
アクセシビリティに取り組むメリット
magi1125
2
270
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
740
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.7k
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
260
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.9k
DESIGNEAST 2025 A-3
_kotobuki_
0
100
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Building Adaptive Systems
keathley
44
2.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
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