#71 SASS vs SCSS vs LESS

SASS vs SCSS vs LESS :

---

🔹 SASS (Syntactically Awesome Stylesheets)

• Older syntax of the Sass preprocessor.
• Uses indentation instead of curly braces and semicolons.
• File extension: .sass
• Clean and minimal syntax.

• Example:

  $primary-color: blue
  body
    background: $primary-color
  

---

🔹 SCSS (Sassy CSS)

• Newer and more popular syntax of Sass.
• CSS-compatible (uses curly braces {} and semicolons ;).
• File extension: .scss
• Easier for those familiar with CSS.

• Example:

  $primary-color: blue;
  body {
    background: $primary-color;
  }
  

---

🔹 LESS (Leaner Style Sheets)

• Another CSS preprocessor (not part of Sass).
• Created by a different team.
• File extension: .less
• Syntax is similar to SCSS but with different variable syntax: @ instead of $.

• Example:

  @primary-color: blue;
  body {
    background: @primary-color;
  }
  

---

✅ Summary:

• SASS: Indentation-based, no braces/semicolons.
• SCSS: CSS-like syntax, more widely adopted.
• LESS: Separate preprocessor, uses @ for variables.

✳️ SCSS is most commonly used today due to its familiarity with standard CSS.