$30 off During Our Annual Pro Sale. View Details »

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
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
150

Other Decks in Technology

See All in Technology
ECMAScript仕様の最新動向: プロセスの変化と仕様のトレンド
Avatar for uhyo uhyo
2
320
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
37k
なぜフロントエンド技術を追うのか？なぜカンファレンスに参加するのか？
Avatar for sakito sakito
8
1.9k
GitLab Duo Agent Platformで実現する“AI駆動・継続的サービス開発”と最新情報のアップデート
Avatar for Taisuke Inoue jeffi7
0
110
なぜ使われないのか？──定量×定性で見極める本当のボトルネック
Avatar for KAKEHASHI kakehashi
PRO
1
640
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
5.7k
翻訳・対話・越境で強いチームワークを作ろう！ / Building Strong Teamwork through Interpretation, Dialogue, and Border-Crossing
Avatar for ar_tama ar_tama
4
1.5k
段階的に進める、 挫折しない自宅サーバ入門
Avatar for yut yu_kod
5
2.2k
HIG学習用スライド
Avatar for 野瀬田　裕樹 yuukiw00w
0
110
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
0
110
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
9.9k
Excelデータ分析で学ぶディメンショナルモデリング ～アジャイルデータモデリングへ向けて～ by @Kazaneya_PR / 20251126
Avatar for 風音屋 (Kazaneya) kazaneya
PRO
3
840

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
370
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.2k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
119
20k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k

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?