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
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
PLaMoを毎日の開発で使い育てていく
Avatar for Preferred Networks pfn
PRO
0
180
【CEDEC2026】専門性の高いデフォルメチームが挑んだ人材育成戦略 〜Cygames Academiaの企画から実施まで〜
Avatar for Cygames, Inc. cygames
PRO
0
370
Breaking the Seal: Static Deobfuscation of Compiled V8 JavaScript Bytecode Malware
Avatar for hasherezade hshrzd
0
480
ガバメントクラウドでのランサムウェア対策
Avatar for 高橋広和 techniczna
1
780
AI駆動開発は個人技からチーム戦へ：組織でAIを使いこなすための実践設計
Avatar for Atsushi Nakatsugawa moongift
PRO
0
450
AIエージェントを前提としたプラットフォーム エンジニアリング：GKEで作るAgent-Ready Golden Path
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
1
200
AIがコードを書く時代、人間は何を保証するのか———馬場さんと考える、開発者に求められる新しい責任と価値 - TECH PLAY
Avatar for Toshiaki Baba netmarkjp
0
1.3k
AI時代の強いチームの作り方
Avatar for yuukiyo yuukiyo
24
15k
LangfuseによるLLMOps基盤の構築と活用事例
Avatar for ZOZO Developers zozotech
PRO
1
280
サイバー捜査員研修（前半）
Avatar for Nomizo Nomizo nomizone
1
1.7k
【CEDEC2026】『GRANBLUE FANTASY: Relink - Endless Ragnarok』のバトル制作事例 ～最高のキャラゲーを目指して～
Avatar for Cygames, Inc. cygames
PRO
0
190
制約理論（ToC）入門　2026版
Avatar for Recruit recruitengineers
PRO
5
940

Featured

See All Featured
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
470
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
160
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
410
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.3k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
560
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
290

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?