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

Front End Badassery with Sass

Avatar for Jessica Eldredge Jessica Eldredge
September 15, 2012
Design
9
390

Front End Badassery with Sass

An intro to the features of Sass/SCSS
Avatar for Jessica Eldredge

Jessica Eldredge

September 15, 2012
Tweet

More Decks by Jessica Eldredge

See All by Jessica Eldredge
Prototyping Layout with CSS Grid - RevolutionConf 2018
Avatar for Jessica Eldredge jessabean
1
310
Prototyping Layout with CSS Grid - Refresh DC
Avatar for Jessica Eldredge jessabean
1
400
Sketchnoting: Creative Notes for Technical Content
Avatar for Jessica Eldredge jessabean
7
1.3k

Other Decks in Design

See All in Design
Storyboard Honey
Avatar for Rocío Parrón rocioparronrubio
0
180
富山デザイン勉強会_デザイントレンド2025.pdf
Avatar for keita keita_yoshikawa
0
250
Fem tips om ux-text • WSA-dagen 29 jan 2025
Avatar for Jonas Söderström jonas_blind_hen
PRO
0
160
LLMによるRAG評価用合成テストデータの生成
Avatar for mtsukada licux
6
960
ほしいテンプレート制作から始めるツール学習のススメ📝
Avatar for あげうどん 60d
0
110
苦労が多かった多言語対応をFigmaで楽にした話
Avatar for Pioneer pioneer_devrel
PRO
0
180
もうひとつのアーキテクチャ #kichijojipm
Avatar for kondoyuko kondoyuko
0
220
Social Anxiety
Avatar for Kayla Smith ksmith2024
0
200
portfolio_YumiYasuda
Avatar for yumi yasuda yum0418
0
240
クライアントワークにおける UXリサーチの実践
Avatar for Kozo Taira kozotaira
0
610
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
Avatar for Yuki Fujisaki tnj
0
360
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
Avatar for Hajime Kato hjmkth
1
470

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
6.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
179
53k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Building Adaptive Systems
Avatar for Chris Keathley keathley
41
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
700
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
120
52k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k

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