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
我々は雰囲気で仕事をしている / How can we do vibe coding as well
Avatar for Naomi Yamasaki naospon
2
220
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
Avatar for takeda_h takeda_h
2
380
KiroでGameDay開催してみよう(準備編)
Avatar for Yuuuuuuu yuuuuuuu168
1
120
サービスロボット最前線：ugoが挑むPhysical AI活用
Avatar for Ken Matsui kmatsuiugo
0
190
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
Avatar for himaratsu himaratsu
0
120
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
Avatar for Takuya MINAGAWA takmin
0
430
Claude Code x Androidアプリ 開発
Avatar for Shinnosuke Kugimiya kgmyshin
1
560
つくって納得、つかって実感！ 大規模言語モデルことはじめ
Avatar for Recruit recruitengineers
PRO
18
4.2k
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの３つのシナリオ
Avatar for Masaya Mori (森正弥) / CAIO (Chief AI Officer) masayamoriofficial
0
160
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
Avatar for kohbis kohbis
2
680
あとはAIに任せて人間は自由に生きる
Avatar for Kentaro Kuribayashi kentaro
3
1.1k
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
Avatar for Kiminori Yokoi nasuvitz
6
410

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
480
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
It's Worth the Effort
Avatar for 3n 3n
187
28k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
61k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Side Projects
Avatar for Sacha Greif sachag
455
43k

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?