应使用支持1–4参数的sass @mixin border-radius($radii...)封装，兼容原生语法，配合全局变量和rounded-safe等扩展处理单边、响应式及ios兼容问题。
border-radius 本身不支持 CSS 继承，也不能靠 class 复用——直接写死数值，改一次要 grep 全项目、漏掉单边写法、响应式分支难维护。用 Sass @mixin 封装才是正解，但得按原生语法对齐，否则反而增加维护成本。
怎么写一个兼容原生四值语法的 border-radius mixin
Sass 的 @mixin 不是函数，不返回值，只展开样式块；它必须能接收 1–4 个参数，和 CSS 原生行为完全一致（border-radius: 4px / border-radius: 4px 8px / border-radius: 4px 8px 12px 6px）
- 别用单参数 @mixin border-radius($r) —— 它掩盖了多值语义，后期补 border-top-right-radius 会绕弯
- 用可变参数 $radii...，配合 @if length($radii) == 0 拦截空参，避免意外覆盖
- 单位自动保留：传 6、6px、0.375rem 都能正确输出，不需手动转换单位
@mixin border-radius($radii...) {
@if length($radii) == 0 {
@return;
}
@if not index($radii, null) {
border-radius: $radii;
}
}
为什么不能用 @extend 或占位符统一圆角
@extend 看似省事，实际会把圆角规则强行注入其他选择器，造成样式污染
- 比如 .card-header @extend .btn，可能意外带上 padding 或 font-size
- 占位符 %rounded 无法接收参数，做不了单边控制，也撑不起响应式分支
- 圆角是纯视觉修饰，不该绑定语义类；所有高频组件（按钮、卡片、输入框）应统一走 @include radius-md 这类命名
单边圆角怎么安全控制，又不破坏设计系统
硬写calc(#{$radius-md} * 1.5) 是危险操作：Sass 编译后单位丢失，px * 1.5 会报错
- 正确做法是扩展参数：@mixin rounded($tl: $radius-md, $tr: $radius-md, $br: $radius-md, $bl: $radius-md)
- 所有参数默认回退到全局变量（如 $radius-md），避免硬编码数值
- 调用示例：@include rounded($tl: $radius-sm, $tr: 0)
- iOS 旧版（7–9）需要 overflow: hidden 配合才能裁剪子元素，建议封装 @mixin rounded-safe 内部自动处理
全局圆角变量该放哪、用什么单位
圆角值散落各处，改一次要搜 37 处；混用rem 和 px 会让编译结果不可控
- 全局只在 _variables.scss 定义：$radius-sm: 2px;、$radius-lg: 8px;、$radius-round: 50%;
- 禁用 em/rem 做基础单位——字体缩放时圆角会意外变形
- 所有 border-radius 相关声明（包括 border-top-left-radius）必须引用变量，不许直接写 4px真正容易被忽略的点：圆角不是“画个弧线”就完事。它牵扯裁剪、定位、响应、跨浏览器一致性——尤其是 overflow: hidden 在 iOS 旧版里不是可选项，是刚需。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
