圆角值应定义在全局 Sass 变量文件中，如 _variables.scss，使用 $radius-sm: 2px; 等像素单位变量统一管理；禁用 calc() 包裹、避免单位混用，高频组件用 @mixin 封装，第三方库通过覆盖其 Sass 变量或同步 CSS 变量对齐。
圆角值该定义在哪儿？别散落在各个 border-radius 里
把 border-radius 写死在组件样式里，等于主动放弃一致性。改个圆角要搜遍所有文件，还容易漏掉伪元素或状态变体（比如 :hover）。Sass 变量是唯一能集中管控的出口——但得选对作用域。
推荐在全局变量文件（如 _variables.scss）中定义：
$radius-sm: 2px; $radius-md: 4px; $radius-lg: 8px; $radius-xl: 12px; $radius-round: 50%;
注意：不建议用 rem 或 % 做基础单位（除 $radius-round），因为圆角对像素敏感，em 会随字体缩放意外变形，rem 在根字体变化时也难预测。
如何避免 border-radius 被覆盖或计算错误
Sass 变量本身不解决层叠问题。常见坑是：父容器有 overflow: hidden，但子元素用了更大的圆角，视觉上被截断；或者用 calc() 混合变量（如 border-radius: calc(#{$radius-md} + 1px)），导致编译后单位缺失报错。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 所有圆角统一走变量，包括
border-top-left-radius等单边属性，避免混用数值和变量 - 禁用
calc()包裹 Sass 变量——直接写#{$radius-md}即可，Sass 会原样输出带单位的值 - 按钮、卡片、输入框等高频组件，用
@mixin封装常用组合，例如：@mixin radius-md { border-radius: $radius-md; }
响应式圆角要不要用媒体查询重设变量
绝大多数场景不需要。移动端小屏反而更需要清晰边界，激进缩小圆角（比如从 $radius-lg 降到 $radius-sm）会让按钮失去识别度。真正需要响应式的，是「是否启用圆角」本身。
例如深色模式下某些卡片取消圆角以强化区块感，或打印样式中强制归零：
@media print {
.card {
border-radius: 0 !important;
}
}
如果真要按断点切换，用 map-get 配合 breakpoint 更稳妥，而不是直接重赋值 $radius-md——后者会影响所有已编译的引用，且无法回溯。
第三方组件库的圆角怎么和你的变量对齐
像 Element Plus、Ant Design 这类库，通常提供 CSS 自定义属性（--el-border-radius）或 Sass 变量入口。优先查文档找对应变量名，然后在你自己的 _variables.scss 中覆盖它：
// Element Plus $--border-radius-small: $radius-sm; $--border-radius-base: $radius-md; $--border-radius-large: $radius-lg;
若库只支持 CSS 变量，则用 :root 手动同步：
:root {
--radius-md: #{$radius-md};
}
关键点：不要试图用 JS 动态注入圆角值到 style 标签——CSS 变量无法被 Sass 编译期读取，会导致逻辑割裂。
最易被忽略的是 SVG 图标内嵌的 <rect></rect> 或 <path></path> 的 rx/ry 属性，它们不响应 CSS border-radius。这类必须单独用变量控制，或改用 clip-path 统一裁切。
