在 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;
}
也可支持参数化，增强灵活性：
根据ui图生成前端页面
下载
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
@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模糊半径的像素对齐表现
