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のグローバルトレンド 2025 / ai global trend 2025
Avatar for kyonmm kyonmm
PRO
1
120
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
Avatar for nanachi nanachi
1
620
Intro to Software Startups: Spring 2025
Avatar for Arnab Nandi arnabdotorg
0
170
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ！～ 豊富な素材出力と制作フローの改善を実現するツールについて～
Avatar for Cygames cygames
PRO
0
240
SRE新規立ち上げ！ Hubbleインフラのこれまでと展望
Avatar for Katsuya Fujii katsuya0515
0
170
リリース２ヶ月で収益化した話
Avatar for Ken.T kent_code3
1
210
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
Avatar for BrainPad brainpadpr
1
390
形式手法特論：位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
Avatar for y_taka_23 ytaka23
3
960
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
Avatar for CUEBiC Inc. cuebic9bic
3
220
20250807_Kiroと私の反省会
Avatar for Rika.I riz3f7
0
190
生成AI導入の効果を最大化する データ活用戦略
Avatar for ham ham0215
0
110
Strands Agents & Bedrock AgentCoreを1分でおさらい
Avatar for みのるん minorun365
PRO
6
250

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
283
13k
It's Worth the Effort
Avatar for 3n 3n
185
28k
Side Projects
Avatar for Sacha Greif sachag
455
43k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
32
8.8k

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?