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
2025年の医用画像AI/AI×medical_imaging_in_2025_generated_by_AI
Avatar for YoshihiroTodoroki tdys13
0
300
モノタロウ x クリエーションラインで実現する チームトポロジーにおける プラットフォームチーム・ ストリームアラインドチームの 効果的なコラボレーション
Avatar for Creationline creationline
0
350
技術選定、下から見るか？横から見るか？
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
170
「アウトプット脳からユーザー価値脳へ」がそんなに簡単にできたら苦労しない #RSGT2026
Avatar for Aki / @LoveIdahoBurger aki_iinuma
7
3.5k
戰略轉變：從建構 AI 代理人到發展可擴展的技能生態系統
Avatar for Bo-Yi Wu appleboy
0
180
re:Invent2025 セッションレポ ～Spec-driven development with Kiro～
Avatar for NRI Netcom nrinetcom
PRO
2
170
Claude Codeを使った情報整理術
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
19
12k
AWSと生成AIで学ぶ！実行計画の読み解き方とSQLチューニングの実践
Avatar for やくも yakumo
2
170
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.2k
ルネサンス開発者を育てる 1on1支援AIエージェント
Avatar for Yusuke Shimizu yusukeshimizu
0
130
AIと融ける人間の冒険
Avatar for pujisi pujisi
0
110

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
420
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
2
77
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
580
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
1
220
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
130
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
35
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
410

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?