Sass is a mature, stable, and powerful CSS preprocessor that extends CSS with variables, nesting, mixins, and modular imports.
Variables & Nesting
$primary-color: #2563eb;
$border-radius: 8px;
.card {
background: #ffffff;
border-radius: $border-radius;
// Nested elements
.title {
color: $primary-color;
}
// Parent selector (&) for pseudo-classes
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
// BEM element modifier with parent selector
&__header {
padding: 16px;
}
}
Mixins & Includes
// Define reusable mixin with default arguments
@mixin flex-center($direction: row) {
display: flex;
flex-direction: $direction;
align-items: center;
justify-content: center;
}
// Include mixin
.hero {
@include flex-center(column);
height: 400px;
}
Functions & Calculations
@use 'sass:math';
@function rem($pixels) {
@return math.div($pixels, 16px) * 1rem;
}
.heading {
font-size: rem(32px); // => 2rem
}
Modern Module System (@use and @forward)
// _variables.scss
$theme-accent: #10b981;
// main.scss
@use 'variables' as vars;
.button {
background-color: vars.$theme-accent;
}