Introduction
Learn what Sass is and why it is called CSS with superpowers.
$color: #CC6699; .btn { background: $color; }Sass stands for Syntactically Awesome Style Sheets. It is a preprocessor: a language that extends CSS with features like variables, nesting, mixins, functions, and a module system, then compiles down to regular CSS that browsers understand.
Why Sass exists
Plain CSS has no variables that scale, no way to reuse blocks of declarations, and no logic. On large projects this leads to repetition and copy-paste. Sass adds the missing tools so your stylesheets stay DRY (Don't Repeat Yourself) and organized.
Dart Sass
This tutorial targets Dart Sass, the current and only actively maintained implementation. The older Ruby Sass and LibSass engines are deprecated. Everything here uses the modern module system with @use and @forward instead of the old @import.
Example
// A tiny taste of Sass (SCSS syntax)
$brand: #CC6699;
$radius: 8px;
.button {
background: $brand;
border-radius: $radius;
color: white;
&:hover {
background: darken($brand, 8%);
}
}
/* Compiles to:
.button {
background: #CC6699;
border-radius: 8px;
color: white;
}
.button:hover {
background: #bf4d86;
}
*/When to use it
- A design team uses Sass variables and nesting to maintain a shared component library across 40+ pages without repeating color values.
- A front-end developer writes a mixin once for vendor-prefixed animations and reuses it across an entire application instead of duplicating CSS.
- An agency uses Sass partials to split a large stylesheet into manageable files per component, then compiles them into a single optimized CSS file.
More examples
Simple Sass variable usage
Defines a brand color once as a Sass variable and applies it to a button component.
$brand-color: #3498db;
.button {
background: $brand-color;
color: white;
padding: 0.5rem 1rem;
}Nesting saves selector repetition
Mirrors HTML structure by nesting child selectors inside their parent, eliminating repeated selector prefixes.
.card {
border: 1px solid #ccc;
h2 {
font-size: 1.25rem;
}
p {
color: #555;
}
}Mixin for reusable pattern
Packages a common flexbox centering pattern into a mixin that any selector can include in one line.
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.hero {
@include flex-center;
height: 100vh;
}
Discussion