Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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
regrowth_tokyo_2025_securityagent
Avatar for h-ashisan hiashisan
0
250
SQLだけでマイグレーションしたい！
Avatar for MakKi makki_d
0
430
AI時代の新規LLMプロダクト開発: Findy Insightsを3ヶ月で立ち上げた舞台裏と振り返り
Avatar for Dakuon dakuon
0
200
re:Invent2025 コンテナ系アップデート振り返り(+CloudWatchログのアップデート紹介)
Avatar for 枡川健太郎 masukawa
0
390
AWS Security Agentの紹介/introducing-aws-security-agent
Avatar for tomoki10 tomoki10
0
310
Reinforcement Fine-tuning 基礎〜実践まで
Avatar for Morita ch6noota
0
190
re:Invent2025 3つの Frontier Agents を紹介 / introducing-3-frontier-agents
Avatar for tomoki10 tomoki10
0
240
2025年 開発生産「可能」性向上報告 サイロ解消からチームが能動性を獲得するまで/ 20251216 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
200
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.5k
SREには開発組織全体で向き合う
Avatar for k-nagase koh_naga
0
370
大企業でもできる！ボトムアップで拡大させるプラットフォームの作り方
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
1
830
Power of Kiro : あなたの㌔はパワステ搭載ですか？
Avatar for r3_yamauchi r3_yamauchi
PRO
0
180

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
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?