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
150

Other Decks in Technology

See All in Technology
Data Engineering Guide 2025 #data_summit_findy by @Kazaneya_PR / 20251106
Avatar for 風音屋 (Kazaneya) kazaneya
PRO
11
2.1k
コミュニティと共に変化する 私とFusicの8年間
Avatar for MasayaYoshino ayasamind
0
440
決済システムの信頼性を支える技術と運用の実践
Avatar for ykagano ykagano
0
400
エンタープライズ企業における開発効率化のためのコンテキスト設計とその活用
Avatar for sergicalsix sergicalsix
1
260
ググるより、AIに聞こう - Don’t Google it, ask AI
Avatar for Oikon oikon48
0
790
CodexでもAgent Skillsを使いたい
Avatar for Gota gotalab555
9
4.1k
The Twin Mandate of Observability
Avatar for Charity Majors charity
1
1.3k
プログラミング言語を書く前に日本語を書く── AI 時代に求められる「言葉で考える」力/登壇資料（井田 献一朗）
Avatar for Hacobu hacobu
PRO
0
130
“それなりに”安全なWebアプリケーションの作り方
Avatar for Ryusei Ishikawa xryuseix
0
260
ソフトウェアテストのAI活用_ver1.50
Avatar for fumisuke fumisuke
0
290
設計は最強のプロンプト - AI時代に武器にすべきスキルとは？-
Avatar for Ken'ichirou Kimura kenichirokimura
1
340
バクラクの AI-BPO を支える AI エージェント 〜とそれを支える Bet AI Guild〜
Avatar for Tomoaki tomoaki25
1
320

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
33k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
370
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
960
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.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?