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
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
140
Git Aliases
Avatar for Andrew Thal athal7
6
150

Other Decks in Technology

See All in Technology
日本語テキストと音楽の対照学習の技術とその応用
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
400
DEVCON 14 Report at AAMSX RU65: V9968, MSX0tab5, MSXDIY etc
Avatar for Akira Tsukamoto mcd500
0
240
What happened to RubyGems and what can we learn?
Avatar for Mike McQuaid mikemcquaid
0
150
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
17k
あたらしい上流工程の形。 0日導入からはじめるAI駆動PM
Avatar for 熊井悠 kumaiu
4
630
ZOZOにおけるAI活用の現在 ~開発組織全体での取り組みと試行錯誤~
Avatar for ZOZO Developers zozotech
PRO
3
2.1k
Azure SRE Agent x PagerDutyによる近未来インシデント対応への期待 / The Future of Incident Response: Azure SRE Agent x PagerDuty
Avatar for AEON aeonpeople
0
260
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
Avatar for capytan capytan
5
1.6k
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
180
みんなだいすきALB、NLBの 仕組みから最新機能まで総おさらい / Mastering ALB & NLB: Internal Mechanics and Latest Innovations
Avatar for 株式会社カミナシ kaminashi
0
160
システムのアラート調査をサポートするAI Agentの紹介/Introduction to an AI Agent for System Alert Investigation
Avatar for SadayoshiTada taddy_919
2
1.2k
漸進的過負荷の原則
Avatar for SansanTech sansantech
PRO
3
430

Featured

See All Featured
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
45
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
130
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
100
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.6k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
720

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?