Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

SCSS vs LESS

Avatar for Andrew Thal Andrew Thal
April 20, 2012
Technology
350
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
190
Developing for Multiple Browsers
Avatar for Andrew Thal athal7
1
170
Scala
Avatar for Andrew Thal athal7
4
730
Guard & Growl
Avatar for Andrew Thal athal7
0
150
Git Aliases
Avatar for Andrew Thal athal7
6
180

Other Decks in Technology

See All in Technology
予測不能な実行エージェントを安全にサクッと試せるサンドボックス環境の話
Avatar for SansanTech sansantech
PRO
0
120
生成AIで高い生産性を求められて、 悩み、乗り越えた話
Avatar for GO Inc. dev mot_techtalk
2
130
自律型 AI をセキュアに実装！Gemini と MIG で作る動的コード実行環境
Avatar for Recruit recruitengineers
PRO
1
210
大阪オフィスに Unitree Go2 がやってきたので Physical AI やってみた
Avatar for dafujii dafujii
0
320
並行性の問題を防げ！実践トランザクション入門
Avatar for Shoichi Ochi occhi
0
270
AgentCoreで実践するハーネスエンジニアリング
Avatar for やくも yakumo
1
280
AI 時代の Azure エンジニアリング ～ 私たちは何を磨き、何を任せるのか ～
Avatar for Akira Inoue chack411
1
470
SDDの運用にめげずに向き合った話
Avatar for SansanTech sansantech
PRO
1
130
カンファレンスに参加した後の浮遊感とセルフケア
Avatar for Pauli pauli
0
310
組み立てて楽しむ AWS Blocks 入門
Avatar for たけのこ kmiya84377
0
220
検証フェーズはAIの回答を判断するための学習機会
Avatar for Toru_Kubota toru_kubota
2
500
今こそ知りたいAmplifyGen2
Avatar for k.masachika mkdev10
2
150

Featured

See All Featured
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
4k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
390
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
2
35k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
490
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
5.2M
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.2k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
510
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
400

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?