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
横断組織デザイナーの働き方
mixi_design
PRO
0
430
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
420
Kid Cowboy 103
marilutwin
0
150
Les petites aventures de CSS, saison 2025
goetter
3
4k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
820k
LayerX DesignersDeck
layerx
PRO
1
7.2k
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜
tak073
0
310
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.4k
デザイナーのお仕事（UI/UX GRAPHIC GROUP）
mirrativ
0
210
LLMによるRAG評価用合成テストデータの生成
licux
6
870
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.3k
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
330

Featured

See All Featured
The Language of Interfaces
destraynor
157
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Building Adaptive Systems
keathley
41
2.5k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Thoughts on Productivity
jonyablonski
69
4.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
Automating Front-end Workflow
addyosmani
1369
200k
Become a Pro
speakerdeck
PRO
27
5.3k
Done Done
chrislema
183
16k

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! [email protected] @jessabean github.com/jessabean