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
330
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
160
Scala
Avatar for Andrew Thal athal7
4
720
Guard & Growl
Avatar for Andrew Thal athal7
0
140
Git Aliases
Avatar for Andrew Thal athal7
6
170

Other Decks in Technology

See All in Technology
AI時代における最適なQA組織の作り方
Avatar for ymty ymty
3
290
知見・人・API・DB・予算 ─ ナイナイ尽くしだった人事データ整備 with dbt、5年間の学び
Avatar for ken ken6377
1
110
AI Agentをシステムに組み込む前にゆるく向き合ってみる
Avatar for hayama hayama17
0
180
5分でわかるDuckDB Quack
Avatar for chanyou0311 chanyou0311
4
280
認証認可だけじゃない！ ID管理の構成要素と ライフサイクルを意識しよう
Avatar for ritou ritou
1
400
本当の”仕事”を手放せる未来が見えた
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
210
Amazon Redshift zero-ETL 統合を活用した軽量なマルチプロダクトデータ可視化基盤 / Lightweight Multi-Product Data Visualization with Amazon Redshift Zero-ETL
Avatar for 株式会社カミナシ kaminashi
0
130
技術・能力を向上する原理原則 #きのこセッションa #きのこ2026
Avatar for bash0C7 bash0c7
0
190
『AIに負けない』より『AIと遊ぶ』」〜ワクワクが最強のテスト・QA学習戦略_公開用
Avatar for odan tomohiro odan611
1
230
感情と身体を置き去りにしない、エンジニアの生きのこり方 ──いまから、ここから「自分の状態」を扱うという選択
Avatar for saori murooka saorimurooka
0
430
小さいから、全部わかる。— 常駐AI "xangi" のすすめ
Avatar for suguuuuuすぐー sugupoko
0
200
「軸足」は 固定しなくていい - 熱量と強みで描く、しなやかなキャリアの形
Avatar for KAKEHASHI kakehashi
PRO
1
300

Featured

See All Featured
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
270
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
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
370
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.9k

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?