Write maintainable CSS with variables, nesting, mixins, modules, maps, and compiled output.
Lessons
Store key-value pairs for tokens and themes.
Maps is easiest to learn by reading the example, changing it, and observing the result.
@use 'sass:map';
$theme: (
primary: #4f46e5,
success: #10b981,
danger: #ef4444,
);
.alert {
background: map.get($theme, success);
}
@debug map.has-key($theme, primary); // truePractice the Maps example in a small scratch file, then explain what changed and why.