直接写 border-radius 易导致项目圆角值散乱失控，Sass 用可变参数 mixin 和预设 map 统一管理，兼顾原生语法、类型安全与设计系统规范。
为什么直接写
容易失控
项目里边框圆角从
到
、
、
随处散落，改一个全局圆角要搜 37 处，还常漏掉
这类单边写法。Sass 的
不是炫技，是把「哪些值合法」「哪些组合常用」「哪些地方必须一致」这些隐性规则显性化。
用
Mixin 统一收口所有圆角调用
别写
这种单参数函数——它掩盖了 CSS 原生支持的四值语法（
），反而逼人后期补 hack。
用可变参数
支持 1–4 个值，和原生 CSS 行为完全对齐
自动处理单位：传
、
、
都能正确输出
加一层保护：当传入空值或
时，不输出任何样式，避免意外覆盖
调用示例：
→
；
→
用
管理设计系统级圆角阶梯
设计师给的「小圆角=4px、中圆角=8px、大圆角=16px、全圆=50%」不能靠人脑记忆，得固化成变量映射。Mixin 在这里只做转发器，真正逻辑在 map 里：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
这样写：
，既防错又可读。注意
返回
时必须显式判断，否则编译会报错。
兼容性与性能上容易被忽略的点
Sass 编译后还是普通 CSS，所以没有运行时开销，但有三个实际影响交付的细节：
别在
里嵌套
或
，会导致生成冗余选择器，尤其当 mixin 被多处调用时
IE 11 不支持
的单边缩写（如
是 OK 的，但
在某些旧版本有渲染 bug），如果还要兼容，得用
等展开写法 + 单独 mixin
所有
值最终都会进入 CSS 文件，不要以为用了 mixin 就能「按需加载」——想真正减体积，得靠构建工具 tree-shaking，不是 Sass 层能解决的
真正难的不是写出这个 mixin，而是团队所有人从此只用
，不再手敲
。这需要 Code Review 卡点，而不是文档里写一句「推荐使用」。
border-radius4px12px50%9999pxborder-top-left-radius@mixinborder-radius@mixin border-radius($r)top-left top-right bottom-right bottom-left...$radii66px0.375remnull@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$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-getnull@mixin@media&border-radiusborder-top-left-radiusborder-radius: 4px 0border-top-left-radiusborder-radius@include border-radius-preset()border-radius: 8px