What is SASS?

What is SASS?

SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor — it extends CSS with features like variables, nesting, mixins, functions, and logic. You write SASS, and it compiles into regular CSS that browsers understand.

Why Use SASS?

Plain CSS works, but it gets painful as projects grow. SASS solves common CSS frustrations:

CSS Problem	SASS Solution
Repeating colours and values everywhere	Variables — define once, use everywhere
Deeply nested selectors are hard to read	Nesting — write selectors inside parents
Copy-pasting repeated style blocks	Mixins — reusable style chunks
One massive CSS file	Imports — split into modular files
No logic or calculations	Math, functions, and conditionals

SASS vs SCSS

SASS has two syntaxes:

Feature	SASS (Indented)	SCSS (Sassy CSS)
File extension	.sass	.scss
Braces	No { } — uses indentation	Uses { } (like CSS)
Semicolons	No ;	Uses ; (like CSS)
Compatibility	Different from CSS	Any valid CSS is valid SCSS

// SASS syntax (.sass) — indentation-based
$primary: #3498db
.button
    background: $primary
    color: white
    padding: 10px 20px
    &:hover
        background: darken($primary, 10%)

// SCSS syntax (.scss) — CSS-like braces
$primary: #3498db;
.button {
    background: $primary;
    color: white;
    padding: 10px 20px;
    &:hover {
        background: darken($primary, 10%);
    }
}

This tutorial uses SCSS syntax — it's the most popular because any CSS file is already valid SCSS.

How SASS Works

You write       →  SASS compiles  →  Browser reads
style.scss          (build step)      style.css

SASS doesn't run in the browser. It's a build tool that transforms .scss files into standard .css files.

A Quick Example

// SCSS input
$font-stack: 'Inter', sans-serif;
$primary: #e74c3c;
$radius: 8px;

.card {
    font-family: $font-stack;
    border-radius: $radius;
    padding: 20px;

    .card-title {
        color: $primary;
        font-size: 24px;
    }

    .card-body {
        color: #666;
        line-height: 1.6;
    }
}

/* Compiled CSS output */
.card {
    font-family: 'Inter', sans-serif;
    border-radius: 8px;
    padding: 20px;
}
.card .card-title {
    color: #e74c3c;
    font-size: 24px;
}
.card .card-body {
    color: #666;
    line-height: 1.6;
}

Who Uses SASS?

SASS is used by most major frameworks and companies:

• Bootstrap (built with SASS)
• Foundation
• Airbnb, GitHub, Spotify
• Most large-scale web applications

Key Takeaways

• SASS is a CSS preprocessor — it adds variables, nesting, mixins, and logic to CSS
• SCSS is the most popular syntax — it uses braces and semicolons like CSS
• Any valid CSS is already valid SCSS — easy migration
• SASS compiles to regular CSS that browsers understand
• It makes CSS more maintainable, modular, and DRY (Don't Repeat Yourself)