Sass

Douglas Karr

Mar 5, 2025

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.

Features of Sass

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.

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

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

Practical Examples of Sass

1. Using Variables

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

2. Nesting

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

3. Mixins

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

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

4. Extend/Inheritance

.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.