直接写 border-radius 易导致项目圆角值散乱失控，Sass 用可变参数 mixin 和预设 map 统一管理，兼顾原生语法、类型安全与设计系统规范。
为什么直接写 border-radius 容易失控
项目里边框圆角从 4px 到 12px、50%、9999px 随处散落，改一个全局圆角要搜 37 处，还常漏掉 border-top-left-radius 这类单边写法。Sass 的 @mixin 不是炫技，是把「哪些值合法」「哪些组合常用」「哪些地方必须一致」这些隐性规则显性化。
用 border-radius Mixin 统一收口所有圆角调用
别写 @mixin border-radius($r) 这种单参数函数——它掩盖了 CSS 原生支持的四值语法（top-left top-right bottom-right bottom-left），反而逼人后期补 hack。
- 用可变参数
...$radii支持 1–4 个值，和原生 CSS 行为完全对齐 - 自动处理单位：传
6、6px、0.375rem都能正确输出 - 加一层保护：当传入空值或
null时，不输出任何样式，避免意外覆盖
@mixin border-radius($radii...) {
@if length($radii) == 0 {
@return;
}
@if not index($radii, null) {
border-radius: $radii;
}
}
调用示例：@include border-radius(8px) → border-radius: 8px;；@include border-radius(4px, 8px, 12px, 6px) → border-radius: 4px 8px 12px 6px;
用 border-radius-preset 管理设计系统级圆角阶梯
设计师给的「小圆角=4px、中圆角=8px、大圆角=16px、全圆=50%」不能靠人脑记忆，得固化成变量映射。Mixin 在这里只做转发器，真正逻辑在 map 里：
$radius-map: (
xs: 2px,
sm: 4px,
md: 8px,
lg: 12px,
xl: 16px,
full: 50%
);
@mixin border-radius-preset($size) {
$val: map-get($radius-map, $size);
@if $val != null {
border-radius: $val;
} @else {
@warn "Unknown radius size '#{$size}'. Available: #{map-keys($radius-map)}.";
}
}
这样写：@include border-radius-preset(md)，既防错又可读。注意 map-get 返回 null 时必须显式判断，否则编译会报错。
兼容性与性能上容易被忽略的点
Sass 编译后还是普通 CSS，所以没有运行时开销，但有三个实际影响交付的细节：
- 别在
@mixin里嵌套@media或&，会导致生成冗余选择器，尤其当 mixin 被多处调用时 - IE 11 不支持
border-radius的单边缩写（如border-top-left-radius是 OK 的，但border-radius: 4px 0在某些旧版本有渲染 bug），如果还要兼容，得用border-top-left-radius等展开写法 + 单独 mixin - 所有
border-radius值最终都会进入 CSS 文件，不要以为用了 mixin 就能「按需加载」——想真正减体积，得靠构建工具 tree-shaking，不是 Sass 层能解决的
真正难的不是写出这个 mixin，而是团队所有人从此只用 @include border-radius-preset()，不再手敲 border-radius: 8px。这需要 Code Review 卡点，而不是文档里写一句「推荐使用」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
