Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SCSS vs LESS

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Andrew Thal Andrew Thal
April 20, 2012
Technology
320
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
180
Developing for Multiple Browsers
Avatar for Andrew Thal athal7
1
160
Scala
Avatar for Andrew Thal athal7
4
720
Guard & Growl
Avatar for Andrew Thal athal7
0
140
Git Aliases
Avatar for Andrew Thal athal7
6
170

Other Decks in Technology

See All in Technology
Fabric-cicd によるAzure DevOps デプロイ
Avatar for Ryoma Nagata ryomaru0825
0
170
React、まだ楽しくて草
Avatar for uhyo uhyo
7
2.7k
さきさん文庫の書籍ができるまで
Avatar for H.Saki sakiengineer
0
320
Java正規表現エンジン（NFA）の仕組みと パフォーマンスを維持するための最適化手法
Avatar for 竹内 雅和 takeuchi_132917
0
160
ルールやカスタム機能、どう使う？理想の出力を引き出すために今知りたいIBM Bob 5つの機能
Avatar for mu (Mizuho Uehara) muehara
0
160
Claude Codeですべての日常業務を爆速化しよう！
Avatar for みのるん minorun365
PRO
17
16k
なぜハノーバーメッセに行くべきなのか 〜初参加だから語れること〜
Avatar for 田中 聖也 tanakaseiya
0
190
OpenClawとHermesAgentでAI新入社員を作った話
Avatar for yanada takanoriyanada
0
150
Dynamic Workersについて
Avatar for Yusuke Wada yusukebe
2
530
食べログのサーキットブレーカー導入を振り返って
Avatar for atpons atpons
1
160
イベントストーミングとKiroの仕様駆動開発で実現する要件の認識合わせプロセス
Avatar for syobochim syobochim
7
990
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.7k

Featured

See All Featured
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
210
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.3k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
190
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.5k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.5k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.3k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.9k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
52k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
410

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?