SASS stands for Syntactically Awesome Style Sheets.
It is a CSS preprocessor that extends the capabilities of CSS (Cascading Style Sheets) by adding powerful features like variables, nesting, mixins, inheritance, and functions.

SASS helps developers write cleaner, reusable, and more efficient CSS code.
The SASS code is compiled (converted) into standard CSS so that browsers can read it.

💡 What is a CSS Preprocessor?

A CSS preprocessor is a scripting language that adds advanced features to regular CSS.
Once the code is written, it must be compiled into plain CSS.
This process helps developers write dynamic and organized stylesheets for large projects.

🧱 Two Syntax Styles in SASS

1. SASS Syntax (.sass)
   • Older syntax.
   • Uses indentation instead of curly braces {} and semicolons ;.
   • Cleaner and shorter.
   Example: $text-color: blue body color: $text-color
2. SCSS Syntax (.scss)
   • Newer and most commonly used syntax.
   • Similar to regular CSS but with extra features.
   • Uses curly braces {} and semicolons ;.
   Example: $text-color: blue; body { color: $text-color; }

⚙️ Basic Example (SCSS Syntax)

$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;

  h1 {
    color: white;
    text-align: center;
  }
}

✅ Explanation:

• $primary-color is a variable that stores a color value.
• Nesting allows defining styles inside other selectors, following HTML structure.
• The SCSS code is compiled into normal CSS for the browser to use.

🌟 Key Features of SASS

1. Variables – Store reusable values like colors, font sizes, etc.
2. Nesting – Write CSS rules inside one another for better structure.
3. Mixins – Create reusable groups of CSS properties.
4. Inheritance (@extend) – Share common styles between selectors.
5. Partials and Imports – Split code into multiple small files for organization.
6. Operators – Perform calculations within styles.
7. Functions – Create custom logic to generate values dynamically.

🧠 Advantages of Using SASS

• Makes CSS more powerful and maintainable.
• Reduces code repetition.
• Easy to update and reuse styles.
• Enhances project scalability.
• Fully compatible with standard CSS.

⚔️ Difference Between CSS and SASS

Feature	CSS	SASS
Full Form	Cascading Style Sheets	Syntactically Awesome Style Sheets
Type	Stylesheet Language	CSS Preprocessor
Syntax	Simple	Advanced (SASS or SCSS)
Variables	Not supported	Supported
Nesting	Not supported	Supported
Mixins & Functions	Not supported	Supported
Compilation	Directly used by browsers	Must be compiled into CSS

🧩 Simple Mixin Example

@mixin button-style($color) {
  background-color: $color;
  border-radius: 5px;
  padding: 10px 20px;
  color: white;
}

button {
  @include button-style(red);
}

✅ Result:
All buttons will have consistent styling with the specified color.

🧾 Summary

• SASS = CSS + Programming Features.
• It helps developers write faster, cleaner, and more maintainable styles.
• It is widely used in modern front-end frameworks like React, Angular, and Vue.