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
330
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
170

Other Decks in Technology

See All in Technology
トークン最適化のためのユーザーストーリー分析 / User Story Analysis for Token Optimization
Avatar for Tomohisa Omagari oomatomo
0
150
AI時代における最適なQA組織の作り方
Avatar for ymty ymty
3
290
次世代ランサムウェア対策の考察 / 20260704 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
5
1.4k
Fabricをフル活用する AI Agent Hub -製造業特化AIエージェントの設計
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
180
攻撃者がいなくてもAIエージェントはインシデントを起こす
Avatar for Nomizo Nomizo nomizone
0
170
Hatena Engineer Seminar 37 jj1uzh
Avatar for jj1uzh jj1uzh
0
360
アラート調査向けAIエージェントの本番導入とその後/AI Agents for Alert Investigation: Production Deployment and After
Avatar for SadayoshiTada taddy_919
1
290
「軸足」は 固定しなくていい - 熱量と強みで描く、しなやかなキャリアの形
Avatar for KAKEHASHI kakehashi
PRO
1
300
AWS Security Hub CSPMの成功・失敗体験
Avatar for cm-usuda-keisuke cmusudakeisuke
0
620
Docker Desktop不要の時代が来る？ WSL標準の「wslc」で Linuxコンテナを動かしてみた.
Avatar for ueponx ueponx
0
350
FinOps X 2026 Recap from Engineer Side #JapanFinOps
Avatar for Satoshi Matsuzawa (Matt) chacco38
0
200
サイバーエージェントにおけるAI推進戦略と変革への取り組み
Avatar for shotaTsuge shotatsuge
0
640

Featured

See All Featured
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
620
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.3k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
340
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
40k
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
480

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?