Mixins and Includes
Create reusable style blocks with @mixin and include them anywhere with @include.
What is a Mixin?
A mixin in Sass is a reusable block of CSS declarations. Unlike a regular class, it can accept parameters, making it more flexible than copy-paste. Define with @mixin, use with @include.
Basic Mixin
A mixin without parameters is just a reusable block:
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.hero {
@include flex-center;
min-height: 100dvh;
}