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

Front End Badassery with Sass

Jessica Eldredge
September 15, 2012
Design
9
370

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
300
Prototyping Layout with CSS Grid - Refresh DC
jessabean
1
370
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k

Other Decks in Design

See All in Design
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
5
1.6k
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
500
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.3k
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
majimasachi
0
290
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
210
Arborea Art Book
thebogheart
1
310
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
210
(第１回) アーキテクト・テックリード育成講座
masakaya
0
110
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
610
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
150
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
530
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
170

Featured

See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Embracing the Ebb and Flow
colly
84
4.5k
How to Ace a Technical Interview
jacobian
276
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Optimizing for Happiness
mojombo
376
70k
Practical Orchestrator
shlominoach
186
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
97
Statistics for Hackers
jakevdp
796
220k
Unsuck your backbone
ammeep
669
57k
Six Lessons from altMBA
skipperchong
27
3.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k

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