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
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
Avatar for Cygames cygames
PRO
2
700
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
Avatar for masayoshi masayoshi
1
370
Microsoft Clarityでインサイトを見つけよう
Avatar for なかしょ nakasho
0
120
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
Avatar for Sansan R&D sansan_randd
0
190
TypeScript 上達の道
Avatar for Kanon ysknsid25
23
5.2k
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする～遊びやすさと競技性の両立～
Avatar for Cygames cygames
PRO
1
240
Claude CodeでKiroの仕様駆動開発を実現させるには...
Avatar for Gota gotalab555
3
710
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
Avatar for Yusuke Kuroiwa wakinchan
0
200
2025新卒研修・HTML/CSS #弁護士ドットコム
Avatar for 弁護士ドットコム bengo4com
3
12k
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
Avatar for CUEBiC Inc. cuebic9bic
2
190
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
Avatar for Shunsuke Narita shunsukenarita
1
290
Claude Codeから我々が学ぶべきこと
Avatar for Oikon s4yuba
4
640

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.4k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
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?