Sass Map设计令牌不能替代CSS自定义属性，因其仅在编译时存在，而CSS变量支持运行时动态修改；二者定位不同，应混用：用Map生成初始值，再用CSS变量实现主题切换与JS交互。
什么是Sass Map设计令牌，它真能替代CSS自定义属性吗
不能替代，但能大幅减少重复维护。Sass Map本身只是编译时的数据结构，$colors、$spacing这类Map在编译后就消失了，最终生成的是静态CSS值；而CSS自定义属性（--primary-color）是运行时可被JS读写、支持主题切换的。两者定位不同：Sass Map管“构建时一致性”，CSS变量管“运行时灵活性”。混用才是常见做法——用Map生成初始变量，再用变量做动态覆盖。
怎么定义和访问颜色/间距等基础令牌Map
别嵌套太深，Map层级建议控制在1–2层。比如$colors直接平铺语义键，不套light/dark子Map（那会增加map-get调用复杂度）：
$colors: ( "primary": #007bff, "success": #28a745, "text": #333, "text-secondary": #6c757d ); $spacing: ( "xs": 4px, "sm": 8px, "md": 16px, "lg": 24px );
访问时用map-get，注意第二个参数必须是字符串（引号不能省）：
-
color: map-get($colors, "primary");✅ -
margin: map-get($spacing, "md");✅ -
map-get($colors, primary)❌（未加引号会被当作变量名解析）
如何安全地从Map中提取深层值或提供默认 fallback
Map嵌套时（比如$breakpoints: ("sm": 576px, "md": 768px)），直接map-get只支持一级查找。要取$theme: ("light": $light-palette, "dark": $dark-palette)里的light.text，得链式调用或封装函数：
立即学习“前端免费学习笔记（深入）”；
@function get-token($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
@if $map == null {
@error "Token not found: #{$keys}";
}
}
@return $map;
}
// 使用
color: get-token($theme, "light", "text");
关键点：
- 函数里用
@each遍历$keys...变长参数，比手写map-get(map-get(...))更健壮 -
@error比静默返回null更容易暴露缺失令牌 - 避免在
@include里反复调用map-get——提取到变量里复用，减少编译开销
为什么Map导出到CSS变量时容易漏掉单位或引号
把Sass Map转成:root里的CSS变量，最容易踩两个坑：
- 数值类（如
16px）直接插进#{}没问题，但字符串类（如"#fff"）会多一层引号，导致--color-primary: "#fff"（带双引号，无效） - 布尔值、null、列表类型无法直传，
map-get返回null时#{}会输出空字符串，造成语法错误
稳妥做法是加类型判断：
:root {
@each $name, $value in $colors {
--color-#{$name}: #{$value};
}
@each $name, $value in $spacing {
// 只对数值型加单位处理，字符串原样输出
@if type-of($value) == "number" {
--space-#{$name}: #{$value};
} @else {
--space-#{$name}: #{$value};
}
}
}
真正麻烦的不是语法，而是团队协作时Map结构没人同步更新——建议用@debug在开发阶段输出Map键名，或用sass-lint规则校验必需键是否存在。
