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
330
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
720
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
Rancherの紹介＆Update情報（RancherJP Online Meetup #09）
Avatar for Yoshiyuki Kono yoshiyuki_kono
0
130
ポケモンの型をTypeScriptの型システムで表現してみた
Avatar for subroh_0508 subroh0508
0
350
AI フレンドリーなエラー監視を TypeScript で実現する
Avatar for Shinobu Hayashi shinyaigeek
2
270
Socrates × Looker　〜セマンティックレイヤーで進化するデータ分析エージェント〜
Avatar for Uchide Hiroki(ucchi-) hanon52_
0
330
はじめてのDatadog
Avatar for KairiM kairim0
0
290
Agentic Defenseとともにセキュリティエンジニアが輝き続けるには / How Security Engineers Can Keep Excelling with Agentic Defense
Avatar for Yuji Oshima yuj1osm
0
120
Building applications in the Gemini API family.
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
2.1k
新規事業を牽引する技術選定 〜フルスタックTypeScript開発の実践事例〜
Avatar for Katsuma Narisawa nullnull
3
360
AIを「創る」と「使う」の循環 — HRテックが実践するリアルなAI組織実装
Avatar for Taketo Sasaki taketo957
0
1.7k
トークン数だけでは測れない — Claude Code 組織展開の効果検証から学んだこと
Avatar for Masaki Kubota makikub
0
130
速さだけじゃない！ VoidZero ツールが移行先に選ばれる理由
Avatar for mizdra mizdra
PRO
6
770
Databricks 月刊サービスアップデート 2026年05月号
Avatar for ちょし tyosi1212
0
210

Featured

See All Featured
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
520
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
390
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.8k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
840
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
360
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
160

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?