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
290

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
130
Scala
Avatar for Andrew Thal athal7
4
690
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
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
300
GitHub Coding Agent 概要
Avatar for KAMEGAWA Kazushi kkamegawa
1
1.7k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
24k
金融システムをモダナイズするためのAmazon Elastic Kubernetes Service(EKS)ノウハウ大全
Avatar for 高棹大樹 daitak
0
120
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
Avatar for ののし nnstt1
1
130
Slackひと声でブログ校正！Claudeレビュー自動化編
Avatar for Yusuke Shimizu yusukeshimizu
3
180
OSMnx Galleryの紹介
Avatar for mopinfish mopinfish
0
150
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
12k
MCP Clientを活用するための設計と実装上の工夫
Avatar for Yudai Hayashi yudai00
1
810
Redmineの意外と知らない便利機能 （Redmine 6.0対応版）
Avatar for MAEDA Go vividtone
0
1.2k
CSSDay, Amsterdam
Avatar for bruce lawson brucel
0
120
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
Avatar for Nayuta S. nayuts
1
210

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Done Done
Avatar for chrislema chrislema
184
16k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
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?