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
690
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
スプリントゴール未達症候群に送る処方箋
Avatar for KAKEHASHI kakehashi
PRO
1
180
TypeScript 上達の道
Avatar for Kanon ysknsid25
2
310
An introduction to Claude Code SDK
Avatar for Akihiro Okuno choplin
3
3.2k
スプリントレビューを効果的にするために
Avatar for Miho Nagase miholovesq
9
1.6k
CSPヘッダー導入で実現するWebサイトの多層防御：今すぐ試せる設定例と運用知見
Avatar for llamakko llamakko
1
130
Bliki (ja), and the Cathedral, and the Bazaar
Avatar for Koichi ITO koic
8
1.3k
SRE with AI：実践から学ぶ、運用課題解決と未来への展望
Avatar for Ryo Yoshii yoshiiryo1
1
680
Maintainer Meetupで「生の声」を聞く ～講演だけじゃないKubeCon
Avatar for Takuto Nagami logica0419
1
160
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
Avatar for SansanTech sansantech
PRO
1
230
Microsoft Fabric ガバナンス設計の一歩目を考える
Avatar for Ryoma Nagata ryomaru0825
1
250
AI Ready API ─ AI時代に求められるAPI設計とは？/ AI-Ready API - Designing MCP and APIs in the AI Era
Avatar for Yoichi Kawasaki yokawasa
20
5.7k
Building GoReleaser - from shell script to paid product
Avatar for Carlos Alexandro Becker caarlos0
0
260

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.8k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
710

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?