css如何统一阴影圆角规范_在sass中定义设计变量-css教程-PHP中文网

css如何统一阴影圆角规范_在sass中定义设计变量

P粉602998670

发布： 2025-12-18 16:22:04

原创

788人浏览过

在 Sass 中统一阴影和圆角规范需先定义语义化变量（如 $radius-sm、$shadow-sm），再通过 mixin 封装复用逻辑（如 @mixin rounded($size)），并对接设计系统、导出 CSS 变量，同时避免过度细分变量和滥用嵌套阴影。

css如何统一阴影圆角规范_在sass中定义设计变量

在 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;
}

登录后复制

也可支持参数化，增强灵活性：

Fotor AI Image Upscaler

Fotor推出的AI图片放大工具

查看详情

立即学习“前端免费学习笔记（深入）”；

@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 此文件，不直引原始变量