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
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
Kaggle未経験社員をメダリストに育てる「AIドラゴン桜」
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
690
電子辞書Brainをネットに繋げてみた(自力編)
Avatar for らすぴー raspython3
0
390
Fabric-cicd によるAzure DevOps デプロイ
Avatar for Ryoma Nagata ryomaru0825
0
170
個人の発見を、組織の知恵に 〜生成AI活用を"探索"から"組織の仕組み"へ〜
Avatar for KintoTech_Dev kintotechdev
2
340
Datadog 認定試験の概要と対策
Avatar for Uechi Shingo uechishingo
0
210
関西に縁あるMicrosoft MVPsが語るCopilotの未来
Avatar for Kaz Asada | しがない情シス kasada
0
830
AI時代から振り返るTerraform drift運用の歴史 / AI Age Reflections on the History of Terraform Drift Operations
Avatar for AEON aeonpeople
2
620
オンコールの負荷軽減のためのBits Assistant 活用方法 / How to Use Bits Assistant to Reduce the Workload on On-Call Staff
Avatar for SMS tech sms_tech
1
360
Terraformモジュールは、なぜ「魔境」化するのか
Avatar for hayama hayama17
1
130
基礎から解説！Icebergで紐解くSnowflake×Databricks連携の現在地
Avatar for TomokiYasuhara cm_yasuhara
0
410
Anthropic AIネイティブ・スタートアップ構築のプレイブック を理解する
Avatar for 長津孝輔 nagatsu
0
230
インフラが苦手でも大丈夫！ 紙芝居 Kubernetes -WWGT 10周年編-
Avatar for Aoi Takahashi aoi1
1
310

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
850
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
200
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
430
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
8.1k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
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?