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
4
300

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
160
Developing for Multiple Browsers
Avatar for Andrew Thal athal7
1
140
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
140

Other Decks in Technology

See All in Technology
入院医療費算定業務をAIで支援する：包括医療費支払い制度とDPCコーディング (公開版)
Avatar for Takashi Nishibayashi hagino3000
0
110
serverless team topology
Avatar for kensh _kensh
3
230
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
Avatar for did0es shuta13
3
210
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
Avatar for Bo-Yi Wu appleboy
0
230
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
Avatar for AEON aeonpeople
1
300
MCP ✖️ Apps SDKを触ってみた
Avatar for hisuzuya hisuzuya
0
370
AWS re:Invent 2025事前勉強会資料 / AWS re:Invent 2025 pre study meetup
Avatar for Masanori Yamaguchi kinunori
0
340
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
Avatar for Jumpei Sakatsu saka2jp
0
110
What's new in OpenShift 4.20
Avatar for Red Hat Livestreaming redhatlivestreaming
0
280
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
Avatar for LayerX layerx
PRO
2
600
もう外には出ない。より快適なフルリモート環境を目指して
Avatar for もっち mottyzzz
13
11k
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか？~
Avatar for curekoshimizu curekoshimizu
3
770

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
526
40k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
658
61k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.9k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
700
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
23k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k

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?