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
340
4

SCSS vs LESS

Comparing and contrasting two CSS alternatives

Avatar for Andrew Thal

Andrew Thal

April 20, 2012

More Decks by Andrew Thal

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

Other Decks in Technology

See All in Technology
[ホンマでっか SRE] あなたはなぜ SRE に?
Avatar for _awache _awache
0
150
暗号化？某ファイルストレージはどうなるの！？ 3rd Partyとうまく付き合う秘密度ラベル設計
Avatar for Kaz Asada | しがない情シス kasada
0
200
AIエージェントのためのデータ設計
Avatar for Daisuke Nakajima daiz21
0
220
Digital Credentials API × OpenID4VP ブラウザ完結型本人確認の実装知見（OAuth/OIDC Numa (Immersion) Workshop 2026）
Avatar for OpenID Foundation Japan oidfj
PRO
0
250
Kiro５兄弟のいまどきのセキュリティ基礎知識
Avatar for Hiroo Katoh kentapapa
0
240
AI for Science時代を切り開く、政府の次世代HPC戦略の展望
Avatar for GPU UNITE gpuunite_official
0
250
RelayerというPHPのフレームワークを作った
Avatar for polidog polidog
PRO
0
140
EMの役割で 変わったこと・変わらなかったこと
Avatar for SansanTech sansantech
PRO
0
120
AI開発に用いられるHPC技術について
Avatar for GPU UNITE gpuunite_official
0
280
Oracle MCP Servers Explained
Avatar for thatjeffsmith thatjeffsmith
1
500
internal/testlog で遊ぼう
Avatar for rokuosan rokuosan
0
220
AI駆動開発を組織で促すために
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
290

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
390
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
470
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
250
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
210
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
740
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3k

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?