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

SCSS vs LESS

Avatar for Andrew Thal Andrew Thal
April 20, 2012
Technology
4
290

SCSS vs LESS

Comparing and contrasting two CSS alternatives
Avatar for Andrew Thal

Andrew Thal

April 20, 2012
Tweet

More Decks by Andrew Thal

See All by Andrew Thal
The Thank You Economy
Avatar for Andrew Thal athal7
0
160
Developing for Multiple Browsers
Avatar for Andrew Thal athal7
1
130
Scala
Avatar for Andrew Thal athal7
4
690
Guard & Growl
Avatar for Andrew Thal athal7
0
130
Git Aliases
Avatar for Andrew Thal athal7
6
140

Other Decks in Technology

See All in Technology
AOAI で AI アプリを開発する時にまず考えたいこと
Avatar for Yuji Masaoka | まっぴぃ mappie_kochi
1
410
製造業向けIoTソリューション提案資料.pdf
Avatar for h.uriu haruki_uiru
0
190
MCPを理解する
Avatar for Yudai Hayashi yudai00
14
9.8k
Ninno LT
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
110
OPENLOGI Company Profile
Avatar for OPENLOGI hr01
0
63k
genspark_presentation.pdf
Avatar for h.uriu haruki_uiru
1
190
地味にいろいろあった！ 2025春のAmazon Bedrockアップデートおさらい
Avatar for みのるん minorun365
PRO
2
560
コスト最適重視でAurora PostgreSQLのログ分析基盤を作ってみた #jawsug_tokyo
Avatar for のんピ non97
2
880
Twelve-Factor-Appから学ぶECS設計プラクティス/ECS practice for Twelve-Factor-App
Avatar for k-ozawa ozawa
3
160
意思決定を支える検索体験を目指してやってきたこと
Avatar for Taisuke Hinata hinatades
PRO
0
400
Winning at PHP in Production in 2025
Avatar for Benjamin Eberlei beberlei
1
270
コードや知識を組み込む / Incorporating Codes and Knowledge
Avatar for Kenji Saito ks91
PRO
0
170

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
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
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.6k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
35
2.7k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
344
40k

Transcript

  1. SCSS vs LESS What's the dif?

  2. Why CSS Sucks

  3. Why CSS Sucks Repetitive code

  4. Why CSS Sucks Long calls (no nesting)

  5. Why CSS Sucks "Magic" Numbers

  6. Necessary Boring Part

  7. Syntactically Awesome Stylesheets Earlier versions inspired by HAML Version 3

    SCSS (Sassy CSS) - CSS OK SASS/SCSS

  8. Creator: Alexis Sellier (cloudhead) Can use in Belorussian LESS

  9. Feature Nesting Operations, Flow control Selector Inheritance Compiles in the

    browser SCSS LESS Feature Comparison

  10. Feature Variables Mixins String Interpolation JS Evaluation SCSS $ @mixin

    #{} none LESS @ . #{} `"hello".toUpperCase() + '!'` Syntax Differences

  11. Dude, show me the code already

  12. SCSS CSS

  13. LESS CSS

  14. CSS 742 SCSS 748 Character comparison LESS 704

  15. So what should I use?

  16. None

  17. fewer characters (@mixin vs .) bootstrap compiles in js -SCSS

    needs compiler outside of Ruby Why?