Introduction to Sass

What Is Sass?

Sass is a scripting language that compiles down to regular CSS. It was created in 2006 by Hampton Catlin and later developed by Natalie Weizenbaum, specifically to solve problems that plain CSS could not: repeated values, deeply repetitive selectors, and no way to reuse a block of declarations across multiple rules.

Browsers cannot run Sass directly. You write .scss files, a Sass compiler (Dart Sass is the current official implementation) processes them, and the output is a plain .css file that you link in your HTML exactly like any other stylesheet.

// styles.scss
$brand-color: #6d28d9;

.button {
  background: $brand-color;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
}

This SCSS compiles to plain CSS where $brand-color is replaced everywhere it is used, no $brand-color ever reaches the browser.

How Sass Fits Into a Project

source.scss  --(Sass compiler)-->  output.css  --(linked in HTML)-->  browser

• You author styles in .scss (or .sass) files, never served directly to the browser.
• A build step (Dart Sass CLI, Vite, webpack, or a framework integration) compiles Sass to CSS.
• Only the compiled .css file is included in your HTML with a normal <link> tag.
• Modern Sass uses the module system (@use / @forward) instead of the legacy @import rule.

Sass Quick Reference

The core building blocks you will meet throughout this course, each covered in its own lesson.

Why Sass Was Created

Plain CSS has no variables (until CSS custom properties arrived much later), no way to nest related selectors, and no way to share a group of declarations across unrelated rules without duplicating them. As stylesheets grew, teams ended up copy-pasting the same color values and property groups dozens of times.

Sass solved this by adding programming-language features, variables, functions, loops, conditionals, and a module system, while keeping the output 100% valid CSS that every browser already understands.

• Eliminates duplicated values through variables.
• Reduces repetitive selectors through nesting and the parent selector &.
• Enables reusable groups of styles through mixins and functions.
• Supports splitting large stylesheets into organized, importable partials.

Sass vs Plain CSS

Every valid CSS file is technically also valid SCSS, which makes adopting Sass incremental: you can rename a .css file to .scss and start introducing variables and nesting gradually, without rewriting anything.

/* plain-css.css */
.card {
  border-radius: 8px;
}
.card-title {
  font-weight: 700;
}

// same-idea.scss
.card {
  border-radius: 8px;

  &-title {
    font-weight: 700;
  }
}

Both examples compile to the same CSS, but the SCSS version keeps related rules visually grouped.

Dart Sass and Modern Tooling

Dart Sass is now the primary, actively developed implementation of Sass (the older LibSass and Ruby Sass implementations are deprecated). Most build tools, Vite, webpack, Astro, and Next.js, use Dart Sass under the hood once you install the sass npm package.

• npm install -D sass adds the Dart Sass compiler to a project.
• Most bundlers automatically detect .scss files once sass is installed, no extra config needed.
• The Sass CLI can also be run directly: sass input.scss output.css.

Common Mistakes

• Thinking Sass is a new styling language you write in the browser; it always compiles to plain CSS first.
• Believing Sass variables become CSS custom properties automatically; they are compile-time only unless you explicitly output a custom property.
• Installing the deprecated node-sass package instead of the actively maintained sass (Dart Sass) package.
• Trying to use @import for everything, in modern Sass, @use and @forward are the recommended approach.

Key Takeaways

• Sass is a CSS preprocessor that compiles .scss files into plain CSS before it reaches the browser.
• It adds variables, nesting, mixins, functions, control rules, and a module system on top of CSS syntax.
• Every valid CSS file is valid SCSS, making adoption incremental.
• Dart Sass is the current, actively maintained implementation most tools use today.