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
310
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
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
160
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
4
1.2k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
430
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
520
harutaka Vision Deck
zenkigenforrecruit
0
150
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.1k
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
線で考える画面構成
natsuume
1
880
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
200
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
180
Haley's adventure chase
ivettetwin
0
230
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
The Pragmatic Product Professional
lauravandoore
35
6.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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