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
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
侵入は突然に 〜 IoTマルウェアと悪用される家庭の機器 ～ / When Intrusion Strikes: IoT Malware and the Abuse of Home Devices
Avatar for NTT docomo Business nttcom
0
5.8k
Software Supply Chain Attackからクラウド環境を守るためにできること
Avatar for LHazy lhazy
2
260
[ChatGPT Work LT]事務作業が苦手な人のための バックオフィスの「半」自動化
Avatar for chimaki chimaki_iot
0
290
グローバル基準のSREは、運用現場でどう機能したか：成熟度アセスメントの実践 ／ SRE NEXT 2026
Avatar for sorawatanabe sorawatanabe
0
230
DatadogのBits Chatが開発組織にもたらしたもの / What Bits Chat Has Brought Us
Avatar for SMS tech sms_tech
1
270
20260807_第6回_関東kaggler会LT_claw系bot xangiと始める、"寂しくない" kaggle
Avatar for suguuuuuすぐー sugupoko
0
280
Bits AI を制するものは Datadog を制す / The player that controls  Bits AI, controls Datadog
Avatar for 株式会社カミナシ kaminashi
0
110
変化の早いClaude Codeを 書籍に落とし込む
Avatar for Oikon oikon48
7
1.4k
制約理論（ToC）入門　2026版
Avatar for Recruit recruitengineers
PRO
8
2.3k
システム思考で問題に対処する
Avatar for yussak yussak
0
290
事業価値と Engineering 2026年度版
Avatar for Recruit recruitengineers
PRO
49
24k
サイバー捜査員研修（前半）
Avatar for Nomizo Nomizo nomizone
1
2k

Featured

See All Featured
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
3
430
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
490
Docker and Python
Avatar for Tania Allard trallard
47
4.1k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
4.3M
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.5k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.5k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.3k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.4k

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?