Sass

A powerful CSS preprocessor that enhances standard CSS by introducing features such as variables, nesting, mixins, functions, and more. It simplifies stylesheet management and improves maintainability, making it a preferred choice for developers working on large-scale projects.

$primary-color: #ff6600
body
  background: $primary-color
  font-family: Arial, sans-serif

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

$bg-color: #f0f0f0;
$font-size: 16px;
body {
  background: $bg-color;
  font-size: $font-size;
}

.navbar {
  background: #333;
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

.button {
  padding: 10px 20px;
  border-radius: 5px;
  background: blue;
  color: white;
}

.primary-button {
  @extend .button;
  background: green;
}

Sass (short for syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, SCSS (Sassy CSS), uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate rules within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively. CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages.

Key Features

• Variables: Store reusable values like colors, fonts, and breakpoints.
• Nesting: Write cleaner, more structured styles within parent elements.
• Mixins: Create reusable style patterns to avoid repetition.
• Inheritance (Extend): Share styles between multiple selectors efficiently.
• Partials & Import: Break stylesheets into modular components without additional HTTP requests.
• Operators: Perform mathematical calculations directly within stylesheets.
• Functions & Loops: Automate styling tasks with logic-based styling.

Sass vs. CSS

Sass extends CSS functionality, making stylesheets more efficient and maintainable. Unlike traditional CSS, Sass allows dynamic styling using programming-like features.

Table: Sass vs. CSS

Feature	CSS	Sass
Variables	❌	✅
Nesting	❌	✅
Mixins	❌	✅
Functions	❌	✅
Operators	❌	✅
Partials	❌	✅

Sass Syntax: Indented vs. SCSS

Sass supports two syntaxes: Sass (Indented) – Uses indentation instead of curly braces and semicolons. SCSS (Sassy CSS) – Uses CSS-like syntax with curly braces and semicolons.

Example of Indented Sass Syntax

“` $primary-color: #ff6600 body background: $primary-color font-family: Arial, sans-serif “`

Example of SCSS Syntax

“`scss $primary-color: #ff6600; body { background: $primary-color; font-family: Arial, sans-serif; } “`

Practical Examples of Sass

1. Using Variables “`scss $bg-color: #f0f0f0; $font-size: 16px; body { background: $bg-color; font-size: $font-size; } “`

2. Nesting “`scss .navbar { background: #333; ul { list-style: none; li { display: inline-block; a { color: white; text-decoration: none; } } } } “`

3. Mixins “`scss @mixin flex-center { display: flex; justify-content: center; align-items: center; } .container { @include flex-center; height: 100vh; } “`

4. Extend/Inheritance “`scss .button { padding: 10px 20px; border-radius: 5px; background: blue; color: white; } .primary-button { @extend .button; background: green; } “`

How to Use Sass

• Install Sass: `npm install -g sass`
• Compile Sass to CSS: `sass input.sass output.css`
• Use in Projects: Link the compiled CSS file in HTML. Utilize modular SCSS files for better code organization.

Sass is a game-changer in web design, offering advanced features that streamline the styling process. It enhances CSS with maintainability and efficiency, making it essential for modern web development.