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

SCSS vs LESS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
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
運用システムにおけるデータ活用とPlatform
Avatar for SansanTech sansantech
PRO
0
140
「SaaSの次の時代」に重要性を増すステークホルダーマネジメントの要諦 ～解像度を圧倒的に高めPdMの価値を最大化させる方法～
Avatar for KAKEHASHI kakehashi
PRO
3
2.8k
Standards et agents IA : un tour d’horizon de MCP, A2A, ADK et plus encore
Avatar for Guillaume Laforge glaforge
0
210
[最強DB講義]推薦システム | 評価編
Avatar for RecSysLab recsyslab
PRO
0
110
AgentCore×VPCでの設計パターンn選と勘所
Avatar for Har1101 har1101
4
340
"おまじない"を卒業する　ボイラープレート再入門
Avatar for shun shunsuke_1b
1
120
COBOL婆さんの伝説
Avatar for フクイ poropinai1966
0
110
ネットワーク運用を楽にするAWS DevOps Agent活用法！！ / 20260421 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
240
Expiration of Secure Boot Certificates for vSphere Virtual Machines
Avatar for MasahiroIrie mirie_sd
0
120
色を視る
Avatar for yuzneri yuzneri
0
240
バイブコーディングで3倍早く⚪⚪を作ってみた
Avatar for Sam Akada samakada
0
190
小説執筆のハーネスエンジニアリング
Avatar for osushi_cr yoshitetsu
0
820

Featured

See All Featured
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
310
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.1k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
380
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
210
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
320
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
200
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
290
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
750
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k

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?