Sass Introduction

What Is Sass?

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor. You write Sass or SCSS source files; a compiler turns them into standard CSS that browsers load as usual.

Author →  styles.scss  (variables, nesting, mixins)
Compile →  styles.css   (plain CSS for the browser)

Two syntaxes:
  .scss  →  SCSS (CSS-compatible; most common)
  .sass  →  indented Sass (no braces)

Prefer @use over legacy @import in new projects

Any valid CSS file is valid SCSS. Learn CSS first—Sass extends it with variables, nesting, mixins, and modules so large stylesheets stay organized.

Why Use Sass?

Plain CSS works, but repeating colors and deep selectors gets messy. Sass adds structure without changing what the browser understands.

How Sass Becomes CSS

Browsers never run SCSS—only the compiled CSS ships:

Your First SCSS File

Variables plus nesting—then compile to CSS:

$primary-color: #333;

body {
  font: 100% Helvetica, sans-serif;
  color: $primary-color;
}

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

sass styles.scss styles.css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

$primary-color → #333 in the CSS
Nested nav { ul { } } → nav ul { }
Browsers load styles.css only

How It Works

1. Variable. $primary-color stores a value you reuse.

2. Nesting. Rules inside nav compile to nav ul, nav a, and so on.

3. Compile. sass (or Vite / Webpack) emits plain CSS for production.

Next, set up the toolchain in Sass Installation.

Sass vs Plain CSS

Sass is a super-set workflow—CSS is still the deliverable:

When to use which

Core Building Blocks

These features show up in almost every Sass project:

Where Is Sass Used?

Sass still powers many front-end stacks:

Key Takeaways