Sass

Variables, mixins and modules with the modern @use workflow.

Values and nesting

$space: 1rem;Declare a Sass variable

.card { padding: $space; }Reference a variable

.button { &:hover { opacity: .8; } }Use the parent selector

.card { > h2 { margin: 0; } }Nest a direct-child selector

@mixin center { display: flex; align-items: center; }Define a mixin

.panel { @include center; }Include reusable declarations

@use "sass:math";Import a built-in module

width: math.div(100%, 3);Divide through the math module

@use "tokens";Load a module with its namespace

color: tokens.$brand;Reference an exported variable

@use "tokens" as theme;Choose a module namespace

sass src/styles.scss public/styles.cssCompile SCSS through the Sass CLI