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
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
160

Other Decks in Technology

See All in Technology
Terragrunt x Snowflake + dbt で作るマルチテナントなデータ基盤構築プラットフォーム
Avatar for Gaku TASHIRO gak_t12
0
530
責任あるソフトウェアエンジニアリングの紹介4章・5章 / RSE_Ch4-5
Avatar for id ido_kara_deru
0
230
TSKaigi 2026 - enumよ、さようなら
Avatar for teamLab teamlab
PRO
2
320
サプライチェーン攻撃への備えについて考えている #湘なんか
Avatar for すてにゃん stefafafan
3
2.2k
AWS WAFの運用を地道に改善し、自社で運用可能にするプラクティス
Avatar for ANDPAD inc andpad
1
670
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.6k
React Compiler導入の効果と運用の工夫
Avatar for KAKEHASHI kakehashi
PRO
3
310
インプロセスQAのための要因から捉えるプロジェクトリスクマネジメントnano #1 開発リソース効率状態への対処 #jasstnano
Avatar for barus_qa_dev barus_qa
0
220
ソフトウェアサプライチェーン攻撃対策として今からサクッとできること
Avatar for GMO Flatt Security flatt_security
2
110
SDDで⾒える、AIコーディングの"内訳"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
150
なぜ、IAMロールのプリンシパルに*による部分マッチングが使えないのか? / 20260518-ssmjp-iam-role-principal
Avatar for opelab opelab
2
150
TSKaigi 2026 - Auth.jsからBetter Authへの 移行に見る「型とランタイム」の 設計思想の変化
Avatar for teamLab teamlab
PRO
1
110

Featured

See All Featured
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
240
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.3M
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
600
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
930
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
140
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
620

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?