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
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
150
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プロジェクト / prAIrie-dog
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
320
ソフトウェアエンジニアとAIエンジニアの役割分担についてのある事例
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
360
Everything As Code
Avatar for わいわい yosuke_ai
0
490
投資戦略を量産せよ 2 - マケデコセミナー(2025/12/26)
Avatar for tomo gamella
1
600
わが10年の叡智をぶつけたカオスなクラウドインフラが、なくなるということ。
Avatar for Hisashi SOGA sogaoh
PRO
1
200
ルネサンス開発者を育てる 1on1支援AIエージェント
Avatar for Yusuke Shimizu yusukeshimizu
0
130
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
11
390k
Keynoteから見るAWSの頭の中
Avatar for NRI Netcom nrinetcom
PRO
1
160
RALGO : AIを組織に組み込む方法 -アルゴリズム中心組織設計- #RSGT2026 / RALGO: How to Integrate AI into an Organization – Algorithm-Centric Organizational Design
Avatar for kyonmm kyonmm
PRO
3
590
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
1
820
BidiAgent と Nova 2 Sonic から​考える音声 AI について
Avatar for Yuuki Yamashita yama3133
2
140
First-Principles-of-Scrum
Avatar for Kenji Hiranabe hiranabe
2
1k

Featured

See All Featured
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
3
35k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
0
2.6k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
110
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
HDC tutorial
Avatar for Michiel Stock michielstock
1
290
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k

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?