Write maintainable CSS with variables, nesting, mixins, modules, maps, and compiled output.
Lessons
Define reusable style blocks with @mixin and @include.
Mixin Basics is easiest to learn by reading the example, changing it, and observing the result.
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.modal {
@include flex-center;
min-height: 100vh;
}Practice the Mixin Basics example in a small scratch file, then explain what changed and why.