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
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
170
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
AgentCore RuntimeからS3 Filesをマウントしてみる
Avatar for Har1101 har1101
3
390
マルチモーダル非構造データとの闘い
Avatar for shibuiwilliam shibuiwilliam
2
310
AI時代に新卒採用、はじめました/junior-engineer-never-die
Avatar for dmnlk dmnlk
0
230
今年60歳のおっさんCBになる
Avatar for Hiroo Katoh kentapapa
1
350
Claude Teamプランの選定と、できること/できないこと
Avatar for ふくだ（fukuda ryu） rfdnxbro
1
1.8k
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.3k
Kubernetes基盤における開発者体験 とセキュリティの両⽴ / Balancing developer experience and security in a Kubernetes-based environment
Avatar for mekka chmikata
0
220
試されDATA SAPPORO [LT]Claude Codeで「ゆっくりデータ分析」
Avatar for Satoru Ishikawa ishikawa_satoru
0
340
あるアーキテクチャ決定と その結果/architecture-decision-and-its-result
Avatar for Ryo Tomidokoro hanhan1978
2
560
Cortex Code君、今日から内製化支援担当ね。
Avatar for あべ coco_se
0
320
第26回FA設備技術勉強会 - Claude/Claude_codeでデータ分析 -
Avatar for コロッケそば happysamurai294
0
400
建設的な現実逃避のしかた / How to practice constructive escapism
Avatar for Pauli pauli
4
300

Featured

See All Featured
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
500
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
400
HDC tutorial
Avatar for Michiel Stock michielstock
1
610
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
120
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
420
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
250
Done Done
Avatar for chrislema chrislema
186
16k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
310
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
310

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?