scss 不支持 javascript 风格的 list 解构赋值；实际应使用 @each 遍历 map 实现批量生成间距类，并通过 @function 封装数值映射逻辑，避免伪解构和无语义的多参数 mixin。
SCSS 本身不支持 JavaScript 风格的 List 解构赋值——这是常见误解的源头。所谓“利用 List 解构赋值简化 CSS 属性编写”，实际是混淆了 JS 语法与 SCSS 的 @each、@for 或 map 迭代机制。
SCSS 没有解构赋值，但可以用 @each + map 模拟类似效果
你不能写 const [p, m] = ['padding', 'margin'] 这类语句，但能用 map 存储间距配置，再用 @each 批量生成类名：
$spacing-map: (
'sm': 0.25rem,
'md': 0.5rem,
'lg': 1rem,
'xl': 1.5rem
);
<p>@each $size, $value in $spacing-map {
.p-#{$size} { padding: $value; }
.pt-#{$size} { padding-top: $value; }
.pb-#{$size} { padding-bottom: $value; }
.m-#{$size} { margin: $value; }
.mt-#{$size} { margin-top: $value; }
}</p>
这比手写几十个类更可控，也避免重复硬编码数值。
用 @function 封装内边距逻辑，而非依赖“解构”
真正提升灵活性的是自定义函数，比如统一处理方向缩写和数值映射：
-
@function spacing($key)可查表返回对应值，支持 fallback -
@mixin pad($side, $size)接收top/all和sm/lg，内部调用spacing() - 避免在每个 class 里重复写
calc(1rem * 1.5)这类表达式
错误做法：试图在 SCSS 里写 [$t, $r, $b, $l] = $values —— 编译直接报错 Invalid CSS after "["。
警惕“自动推导方向”的 mixin，它常导致不可维护的耦合
有些教程鼓吹用 @mixin p($a, $b, $c, $d) 模拟 CSS 的四值语法（如 padding: 1rem 1.5rem 0.5rem 0），看似省事，实则埋雷：
- 调用时顺序必须严格匹配
top right bottom left，无命名提示，易错 - 无法单独覆盖某一边，比如只改
padding-bottom还得重写全部四个值 - VS Code 和编译器对这种“伪函数”无参数提示，重构成本高
更稳妥的方式是明确拆分：.pt-md、.px-lg、.pb-0 —— 类名即语义，无需记忆参数位置。
真正需要关注的是 map 结构是否覆盖了业务中所有常用间距档位，以及 @function 是否处理了单位缺失、空值等边界情况——这些细节比“语法糖”更容易被忽略，却直接影响后续组件复用的稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
