基于 Sass Maps 的配置驱动样式模式

利用多层嵌套 Map 管理主题、断点和组件变体，通过函数和混入实现声明式配置。 · 难度：入门 · +10XP

基于 Sass Maps 的配置驱动样式模式

Sass Maps 不仅是键值对，还可以嵌套 Map 构建复杂配置树。本课展示如何用单一 Map 定义完整主题（颜色、字体、间距）、断点系统以及组件变体（如按钮大小/颜色组合）。通过封装 map-deep-get、map-merge 和 @each 指令，实现“一次配置，全局生效”的开发体验。同时讨论 Map 与模块化（@use 和 @forward）的结合，避免全局变量污染。

$config: (
  'theme': (
    'primary': #3498db,
    'danger': #e74c3c
  ),
  'breakpoints': (
    'sm': 576px,
    'md': 768px
  ),
  'button': (
    'sizes': (
      'small': 0.5rem 1rem,
      'large': 1rem 2rem
    )
  )
);
@function config($keys...) {
  $value: $config;
  @each $key in $keys {
    $value: map-get($value, $key);
  }
  @return $value;
}
.btn {
  padding: config('button', 'sizes', 'small');
}