$30 off During Our Annual Pro Sale. View Details »

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
Amazon Bedrock Knowledge Bases × メタデータ活用で実現する検証可能な RAG 設計
Avatar for Tomoaki tomoaki25
6
1.4k
Agent Skillsがハーネスの垣根を超える日
Avatar for Gota gotalab555
3
1.3k
ペアーズにおけるAIエージェント 基盤とText to SQLツールの紹介
Avatar for Hikaru Sasamoto hisamouna
2
880
AWS re:Invent 2025 re:Cap LT大会 データベース好きが語る re:Invent 2025 データベースアップデート/セッションの紹介
Avatar for Cold-Airflow coldairflow
0
120
AI-DLCを現場にインストールしてみた：プロトタイプ開発で分かったこと･やめたこと
Avatar for Recruit recruitengineers
PRO
2
190
AlmaLinux + KVM + Cockpit で始めるお手軽仮想化基盤 ～ 開発環境などでの利用を想定して ～
Avatar for koedoyoshida koedoyoshida
0
120
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.5k
mairuでつくるクレデンシャルレス開発環境 / Credential-less development environment using Mailru
Avatar for Issei Naruta mirakui
5
570
100以上の新規コネクタ提供を可能にしたアーキテクチャ
Avatar for yu-kioo ooyukioo
0
150
子育てで想像してなかった「見えないダメージ」 / Unforeseen "hidden burdens" of raising children.
Avatar for Pauli pauli
2
300
初めてのDatabricks AI/BI Genie
Avatar for Takaaki Yayoi taka_aki
0
240
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
Avatar for SansanTech sansantech
PRO
1
160

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
290
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
710
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
0
1.8k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
58
6.2k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
400
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.8k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
0
2.3k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
11
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
180
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
63

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?