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
AI時代に非連続な成長を実現するエンジニアリング戦略
Avatar for SansanTech sansantech
PRO
3
810
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
Avatar for Daisuke Sato dskst
7
780
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
Avatar for 弁護士ドットコム bengo4com
1
1.4k
Goss: New Production-Ready Go Binding for Faiss #coefl_go_jp
Avatar for 弁護士ドットコム bengo4com
1
1.1k
AIとTDDによるNext.js「隙間ツール」開発の実践
Avatar for Makoto Tateno makotot
6
790
コスト削減の基本の「キ」～ コスト消費3大リソースへの対策 ～
Avatar for Makky12 smt7174
2
290
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
Avatar for mtx2s mtx2s
7
66k
Yahoo!ニュースにおけるソフトウェア開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
580
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
Avatar for MasahiroKawahara masahirokawahara
1
750
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
Avatar for hacusk hacusk
1
130
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
Avatar for Yuji Oshima yuj1osm
2
220
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
Avatar for gree_tech gree_tech
PRO
0
310

Featured

See All Featured
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k

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?