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

SCSS vs LESS

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Andrew Thal Andrew Thal
April 20, 2012
Technology
4
320

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
170
Developing for Multiple Browsers
Avatar for Andrew Thal athal7
1
150
Scala
Avatar for Andrew Thal athal7
4
710
Guard & Growl
Avatar for Andrew Thal athal7
0
140
Git Aliases
Avatar for Andrew Thal athal7
6
160

Other Decks in Technology

See All in Technology
Datadog の RBAC のすべて
Avatar for 株式会社ヌーラボ nulabinc
PRO
3
460
身体を持ったパーソナルAIエージェントの 可能性を探る開発
Avatar for yoko / Naoki Yokomachi yokomachi
1
110
スクリプトの先へ！AIエージェントと組み合わせる モバイルE2Eテスト
Avatar for Ryo WATANABE error96num
0
170
楽しく学ぼう！ネットワーク入門
Avatar for Shota Shiratori shotashiratori
4
3.2k
Go標準パッケージのI/O処理をながめる
Avatar for matumoto matumoto
0
180
情シスのための生成AI実践ガイド2026 / Generative AI Practical Guide for Business Technology 2026
Avatar for Akira Maeda glidenote
0
220
Dr. Werner Vogelsの14年のキーノートから紐解くエンジニアリング組織への処方箋@JAWS DAYS 2026
Avatar for Hiroshi Hayakawa (p0n) p0n
1
130
us-east-1 に障害が起きた時に、 ap-northeast-1 にどんな影響があるか 説明できるようになろう！
Avatar for Kazuki Miura miu_crescent
PRO
13
4.3k
[JAWSDAYS2026][D8]その起票、愛が足りてますか？AWSサポートを味方につける、技術的「ラブレター」の書き方
Avatar for hirosys hirosys_
3
170
[JAWSDAYS2026]Who is responsible for IAM
Avatar for Mizuki TSUJI mizukibbb
0
540
[JAWS DAYS 2026]私の AWS DevOps Agent 推しポイント
Avatar for Toshihiro Furuno furuton
0
150
JAWS FESTA 2025でリリースしたほぼリアルタイム文字起こし/翻訳機能の構成について
Avatar for 木村直紀 naoki8408
1
430

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
464
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
980
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.2k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
250
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
160
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.1k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k

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?