Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

SCSS vs LESS

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

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
140
Scala
Avatar for Andrew Thal athal7
4
700
Guard & Growl
Avatar for Andrew Thal athal7
0
130
Git Aliases
Avatar for Andrew Thal athal7
6
150

Other Decks in Technology

See All in Technology
一億総業務改善を支える社内AIエージェント基盤の要諦
Avatar for Yuku Kotani yukukotani
7
2.2k
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
970
命名から始めるSpec Driven
Avatar for Kurowi kuruwic
3
710
翻訳・対話・越境で強いチームワークを作ろう！ / Building Strong Teamwork through Interpretation, Dialogue, and Border-Crossing
Avatar for ar_tama ar_tama
3
700
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
21k
【ASW21-02】STAMP/CAST分析における生成AIの支援 ～羽田空港航空機衝突事故を題材として （Support of Generative AI in STAMP/CAST Analysis - A Case Study Based on the Haneda Airport Aircraft Accident -）
Avatar for Hiroyuki.Anraku hianraku9498
2
450
AI 時代のデータ戦略
Avatar for na0 na0
8
2.2k
プロダクト負債と歩む持続可能なサービスを育てるための挑戦
Avatar for SansanTech sansantech
PRO
1
1.2k
生成AIシステムとAIエージェントに関する性能や安全性の評価
Avatar for shibuiwilliam shibuiwilliam
2
280
TypeScript 6.0で非推奨化されるオプションたち
Avatar for uhyo uhyo
15
5.7k
確実に伝えるHealth通知 〜半自動システムでほどよく漏れなく / JAWS-UG 神戸 #9 神戸へようこそ！LT会
Avatar for GENDA genda
0
160
メッセージ駆動が可能にする結合の最適化
Avatar for かとじゅん j5ik2o
9
1.7k

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
64
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
360
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.3k
Docker and Python
Avatar for Tania Allard trallard
46
3.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k

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?