在 Sass 中统一阴影和圆角规范需先定义语义化变量（如 $radius-sm、$shadow-sm），再通过 mixin 封装复用逻辑（如 @mixin rounded($size)），并对接设计系统、导出 CSS 变量，同时避免过度细分变量和滥用嵌套阴影。
在 Sass 中统一阴影和圆角规范，核心是把设计系统中的常用值抽成变量，再通过 mixin 或函数封装复用逻辑，既保证视觉一致性，又提升开发效率。
定义基础设计变量
在 _variables.scss 中集中声明语义化变量，避免直接使用魔法数字：
-
圆角：按层级区分，如
$radius-sm: 4px、$radius-md: 8px、$radius-lg: 12px、$radius-full: 9999px -
阴影：按使用场景命名，如
$shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05)、$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1)、$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) - 可选增加
$elevation-1~$elevation-4等语义名，适配 Material Design 风格
封装可复用的混合宏（mixin）
用 mixin 组合变量，降低调用成本，也便于后续批量调整：
@mixin card-radius-shadow {
border-radius: $radius-md;
box-shadow: $shadow-sm;
}
@mixin btn-primary {
border-radius: $radius-sm;
box-shadow: $shadow-xs;
}
也可支持参数化，增强灵活性：
立即学习“前端免费学习笔记（深入）”；
@mixin rounded($size: md) {
@if $size == sm { border-radius: $radius-sm; }
@else if $size == md { border-radius: $radius-md; }
@else if $size == lg { border-radius: $radius-lg; }
@else { border-radius: $size; }
}
// 使用：@include rounded(lg);
与设计系统对齐的进阶技巧
让前端规范真正落地，需兼顾协作与维护性：
- 变量命名保持与设计工具（如 Figma 变量）一致，例如
$corner-radius-medium对应 Figma 的Corner Radius / Medium - 阴影变量可按「深度」分组，配合 CSS 自定义属性导出，供 JS 动态读取或暗色模式切换
- 在项目根目录建
_design-tokens.scss，只暴露经过审核的设计值，业务组件只 import 此文件，不直引原始变量
避免常见陷阱
统一不是一刀切，要留出合理弹性：
- 不要为每个圆角值都建变量（如
$radius-3、$radius-5），只保留设计系统确认的有限断点 - 阴影避免过度依赖多层嵌套写法，优先用预设组合；需要动态阴影时，改用
filter: drop-shadow()或 CSS Houdini（较新） - Sass 编译后仍需在浏览器中验证真实渲染效果，尤其注意 Safari 对
box-shadow模糊半径的像素对齐表现
