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
320

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
楽しく学ぼう！コミュニティ入門 AWSと人が つむいできたストーリー
Avatar for hiroramos hiroramos4
PRO
1
190
マルチプレーンGPUネットワークを実現するシャッフルアーキテクチャの整理と考察
Avatar for Masayuki Kobayashi markunet
2
240
ナレッジワークのご紹介（第88回情報処理学会 ）
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
190
Postman v12 で変わる API開発ワークフロー (Postman v12 アップデート) / New API development workflow with Postman v12
Avatar for Yoichi Kawasaki yokawasa
0
110
IBM Bobを使って、PostgreSQLのToDoアプリをDb2へ変換してみよう/202603_Dojo_Bob
Avatar for Mayumi Hirano mayumihirano
1
330
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
5
1.2k
JAWS FESTA 2025でリリースしたほぼリアルタイム文字起こし/翻訳機能の構成について
Avatar for 木村直紀 naoki8408
1
420
The_Evolution_of_Bits_AI_SRE.pdf
Avatar for 株式会社ヌーラボ nulabinc
PRO
0
180
組織全体で実現する標準監視設計
Avatar for Yuto Obayashi yuobayashi
3
490
AIエージェント時代に備える AWS Organizations とアカウント設計
Avatar for Hajime KOSHIRO kossykinto
3
870
OSC仙台プレ勉強会　AlmaLinuxとは
Avatar for koedoyoshida koedoyoshida
0
150
わたしがセキュアにAWSを使えるわけないじゃん、ムリムリ！(※ムリじゃなかった!?)
Avatar for cm-usuda-keisuke cmusudakeisuke
1
690

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
67
37k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
140
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.6M
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
290
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
120
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
150
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
210
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k

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?