Sass
A CSS preprocessor adding variables, nesting, and reusable logic.
CurrentintermediateGuide only -- no course yet
Overview
Sass compiles a superset of CSS (with variables, nesting, mixins, and functions) down to plain CSS. It solves problems plain CSS didn't have good native answers for until custom properties and nesting arrived -- and many teams still prefer its more powerful tooling.
- What it is
- A CSS preprocessor language that compiles to standard CSS at build time.
- Why it's used
- For variables, nested selectors, reusable mixins, and splitting styles across files -- before native CSS covered most of this.
- Where it fits
- In a build pipeline, before the CSS reaches the browser; commonly paired with Bootstrap for customization.
Core concepts
- Variables ($variable)
- Nesting selectors
- Mixins and functions
- Partials and @use/@import
- Compiling to CSS
Example
The & refers to the parent selector (.button:hover), and darken() is a Sass color function -- neither exists in plain CSS.
$primary: #14532d;
.button {
background: $primary;
&:hover { background: darken($primary, 10%); }
}Common use cases
- Large stylesheets needing organization
- Design systems with themeable variables
- Customizing Bootstrap
Project ideas
- Convert a plain CSS stylesheet to Sass using variables and nesting