Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

SCSS vs LESS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Andrew Thal Andrew Thal
April 20, 2012
Technology
350
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
190
Developing for Multiple Browsers
Avatar for Andrew Thal athal7
1
170
Scala
Avatar for Andrew Thal athal7
4
730
Guard & Growl
Avatar for Andrew Thal athal7
0
150
Git Aliases
Avatar for Andrew Thal athal7
6
180

Other Decks in Technology

See All in Technology
AI時代に必要な脅威モデリング― 変化の速度に負けない理解とリスク判断
Avatar for masakane55 masakane55
4
1k
More Freedom on the Same Shared GPU Cluster: A Small Team’s Experience with vCluster
Avatar for NTT docomo Business nttcom
0
140
全人類（ほぼ）AWS Organizations の上でAWSを利用している、その世界を知る話
Avatar for Hayato Tan htan
0
120
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
17
120k
[2026 Oracle Technical Deep Dive] OCI AI Resilience -OCIのセキュリティ対策機能をきちんと使いこなす- (2026年9月17日開催)
Avatar for oracle4engineer oracle4engineer
PRO
0
130
Codex概要
Avatar for Y.Miyado ymiya55
0
410
データ品質を壊しながらSnowflakeのAIに分析させてみた
Avatar for かわなご kawanago
0
520
契約書画像からの情報抽出に特化した視覚接地モデルを育てる話
Avatar for SansanTech sansantech
PRO
1
140
[2026 Oracle Technical Deep Dive] AI時代のデータベース基盤をどう選ぶ？ Exadata Database Serviceの選択肢と使い分け (2026年9月17日開催)
Avatar for oracle4engineer oracle4engineer
PRO
0
220
組み立てて楽しむ AWS Blocks 入門
Avatar for たけのこ kmiya84377
0
220
IR Today: Theory, Practice, and Agents
Avatar for Daniel Tunkelang dtunkelang
0
350
ai_cording_with_k8s_knowledge.pdf
Avatar for mochizuki875 mochizuki875
1
290

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
48
7.4k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
610
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
7k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
590
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.8k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
440
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
700
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k

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?