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
320
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
170
Developing for Multiple Browsers
Avatar for Andrew Thal athal7
1
150
Scala
Avatar for Andrew Thal athal7
4
710
Guard & Growl
Avatar for Andrew Thal athal7
0
140
Git Aliases
Avatar for Andrew Thal athal7
6
160

Other Decks in Technology

See All in Technology
DIPS2.0データに基づく森林管理における無人航空機の利用状況
Avatar for Forestgeo.info naokimuroki
0
170
シン・リスコフの置換原則 〜現代風に考えるSOLIDの原則〜
Avatar for Watanabe Jin jinwatanabe
0
170
20260410 - CNTUG meetup #72 - DiskImage Builder 介紹：以 Kubespray CI 打造 RockyLinux 10 Cloud Image 為例
Avatar for ChengHao Yang tico88612
0
110
すごいぞManaged Kubernetes
Avatar for Haruka Sakihara harukasakihara
1
370
2026年度新卒技術研修 サイバーエージェントのデータベース 活用事例とパフォーマンス調査入門
Avatar for CyberAgent cyberagentdevelopers
PRO
6
7k
バックオフィスPJのPjMをコーポレートITが担うとうまくいく3つの理由
Avatar for chama yueda256
1
290
Hello UUID
Avatar for mimifuwacc mimifuwacc
0
130
Data Enabling Team立ち上げました
Avatar for SansanTech sansantech
PRO
0
300
スクラムを支える内部品質の話
Avatar for IIJ_PR iij_pr
0
350
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
Avatar for you（@youtoy） you
PRO
0
270
Proxmox超入門
Avatar for とことんDevOps devops_vtj
0
150
仕様通り動くの先へ。Claude Codeで「使える」を検証する
Avatar for Gota gotalab555
8
3.1k

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
280
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
110
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
250
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
160
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k

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?