Write maintainable CSS with variables, nesting, mixins, modules, maps, and compiled output.
Lessons
Combine loops and conditions to keep CSS DRY.
Control Flow Patterns is easiest to learn by reading the example, changing it, and observing the result.
@mixin theme($mode) {
@if $mode == dark {
background: #111827;
color: #f9fafb;
} @else if $mode == light {
background: #ffffff;
color: #111827;
} @else {
@error "Unknown mode: #{$mode}";
}
}
body { @include theme(dark); }Practice the Control Flow Patterns example in a small scratch file, then explain what changed and why.