sass原生不支持javascript风格的解构赋值；应使用map-get()逐个取值，或封装get-config()函数提升可读性，避免@each、map-values()等错误方式及@use with参数的误用。
Sass里没有真正的解构赋值语法
直接说结论：Sass（包括Dart Sass、Node Sass）原生不支持类似JavaScript的const { x, y } = obj这种解构赋值。你不能对map或list做($a, $b): $pair或(key: $val): $map这样的写法——编译器会报错SyntaxError: Invalid CSS after "...": expected "{", was "($a, $b): $pair"。
用map-get()模拟“解构”行为最稳妥
实际开发中，多数人想“解构”的其实是map类型的配置变量（比如主题色、间距配置）。这时候应放弃语法糖幻想，老实用map-get()逐个取值。它语义清晰、兼容性好（Dart Sass 1.0+ 和旧版Node Sass都支持），且不会引入隐式副作用。
常见错误是试图用map-values()或map-keys()强行“批量提取”，结果顺序错乱或键名丢失：
-
map-values($config)只返回值列表，丢弃键名，无法保证font-size一定在line-height前面 - 用
@each $key, $val in $config再赋值，看似像解构，但变量作用域受限（仅在@each块内有效）
正确做法是显式声明变量：
$theme: ( 'color-primary': #007bff, 'spacing-sm': 4px, 'radius-md': 6px ); $primary-color: map-get($theme, 'color-primary'); $spacing-sm: map-get($theme, 'spacing-sm'); $radius-md: map-get($theme, 'radius-md');
封装get-config()函数提升可读性
重复写map-get($theme, 'xxx')确实冗长。可以封装一个简短函数，让调用更接近“解构感”，同时保留类型安全和调试友好性：
示例函数定义：
@function get-config($key) {
@if not map-has-key($theme, $key) {
@error "Unknown config key: '#{$key}'";
}
@return map-get($theme, $key);
}
使用时就变成：
.btn {
color: get-config('color-primary');
padding: get-config('spacing-sm');
border-radius: get-config('radius-md');
}
注意点：
- 函数必须在
$theme定义之后引入，否则map-has-key()会报Undefined variable - 不要把
$theme作为参数传入函数——Sass函数不能接收未声明的map字面量作为参数（会解析失败） - 如果项目有多个配置源（如
$light-theme、$dark-theme），需改用带命名空间的函数，例如get-light-config('color-bg')
别碰@use规则里的with参数“假解构”
有人尝试用@use 'theme' with ($color: #007bff)来“注入变量”，但这不是解构，而是模块级变量覆盖，且只在@use作用域生效，无法用于运行时map查询。更麻烦的是，它会破坏原有map结构——如果你的theme.scss内部依赖完整map，单独覆盖某个键会导致map-get()返回null。
真正需要动态组合配置时，优先用map-merge()构造新map，而不是靠with硬塞单个值：
$custom-theme: map-merge($base-theme, ( 'color-primary': #28a745, 'spacing-sm': 8px ));
复杂点在于，Sass的map是不可变的，每次map-merge()都生成新引用；而所谓“解构”背后往往藏着状态管理需求——这时候该考虑把配置逻辑前置到构建脚本（如PostCSS插件或JS生成Sass变量文件），而不是在Sass里硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
