Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front End Badassery with Sass

Jessica Eldredge
September 15, 2012
Design
9
380

Front End Badassery with Sass

An intro to the features of Sass/SCSS

Jessica Eldredge

September 15, 2012
Tweet

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
400
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k

Other Decks in Design

See All in Design
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
390
PF_濵村ひろみ_202503
maru_design78
0
120
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは？
atsushihomma
1
390
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
150
LLMによるRAG評価用合成テストデータの生成
licux
6
910
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
160
Masked shaman-Storyboard 2025
ashley0521
0
250
デザイナーとPMの両ロール_３つのポイント
toy1618
1
280
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.1k
Tableau曲線表現講座(2024.11.21)
cielo1985
0
350
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
1.3k
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
240

Featured

See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
Designing Experiences People Love
moore
141
24k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Agile that works and the tools we love
rasmusluckow
328
21k
Building Adaptive Systems
keathley
41
2.5k
Navigating Team Friction
lara
184
15k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
We Have a Design System, Now What?
morganepeng
52
7.5k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Documentation Writing (for coders)
carmenintech
69
4.7k
Building an army of robots
kneath
304
45k

Transcript

  1. FRONT END BADASSERY WITH SASS Jessica Eldredge RailsGirls DC 2012

  2. “I don’t like the green. Can we change it?”

  3. CSS IS A PAIN

  4. it lacks VARIABLES it lacks FUNCTIONS it’s LONG it’s REPETITIVE

  5. ENTER SASS a front end developer’s dream

  6. SASS OR SCSS?

  7. TWO DIFFERENT SYNTAXES

  8. VARIABLES

  9. NESTING

  10. MIXINS

  11. EXTEND

  12. COLOR FUNCTIONS

  13. MATH

  14. HELPFUL TIPS

  15. LIMIT YOUR NESTING no more than 2 levels

  16. USE @IMPORT no extra HTTP requests!

  17. SEPARATE MIXINS keep a mixin library

  18. USE PARTIALS think in terms of MODULES build up your

    LIBRARY

  19. NEXT STEPS

  20. FRAMEWORKS, LIBRARIES Compass compass-style.org Bourbon thoughtbot.com/bourbon

  21. LEARN MORE SCSS Sass Documentation thesassway.com Chris Eppstein @chriseppstein github.com/chriseppstein

  22. OTHER PREPROCESSORS LESS lesscss.org Stylus learnboost.github.com/stylus

  23. GO FORTH, BADASS

  24. KEEP IN TOUCH! jessica.avison@gmail.com @jessabean github.com/jessabean