Sass adds variables, nesting, mixins, and functions to CSS via compilation to regular CSS. @mixin and @include create reusable style blocks. Native CSS nesting and custom properties now cover most Sass use cases.
Sass — CSS Preprocessor
// Variables
$primary: #3b82f6;
$radius: 8px;
// Nesting
.card {
border-radius: $radius;
&__title { font-size: 1.5rem; }
&:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
}
// Mixin
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.hero { @include flex-center; }