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
310

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
170
Developing for Multiple Browsers
Avatar for Andrew Thal athal7
1
150
Scala
Avatar for Andrew Thal athal7
4
710
Guard & Growl
Avatar for Andrew Thal athal7
0
140
Git Aliases
Avatar for Andrew Thal athal7
6
160

Other Decks in Technology

See All in Technology
Agent Skills 入門
Avatar for puku0x puku0x
0
720
欲しいを叶える個人開発の進め方 / How to Run an Indie Project That Brings Your Ideas to Life
Avatar for Endo_Hizumi endohizumi
0
110
2026年のAIエージェント構築はどうなる？
Avatar for みのるん minorun365
9
1.5k
ローカルでLLMを使ってみよう
Avatar for kosmosebi kosmosebi
0
110
Generative UI を試そう！A2-UIでAIエージェントにダッシュボードを作らせてみた
Avatar for Kamoshika kamoshika
1
230
プロダクト開発の品質を守るAIコードレビュー：事例に見る導入ポイント
Avatar for Atsushi Nakatsugawa moongift
PRO
1
110
EMから現場に戻って見えた2026年の開発者視点
Avatar for aki sudoakiy
1
220
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
3
720
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
94k
Exadata Fleet Update
Avatar for oracle4engineer oracle4engineer
PRO
0
1.2k
1,000 にも届く AWS Organizations 組織のポリシー運用をちゃんとしたい、という話
Avatar for kazzpapa3 kazzpapa3
1
270
なぜAIは チーム開発を 速くしないのか
Avatar for Go Tanaka tan_go238
8
3.2k

Featured

See All Featured
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.6k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
440
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.3k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Side Projects
Avatar for Sacha Greif sachag
455
43k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
250
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.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?