如何通过SCSS快速生成阴影库_使用Map存储CSS阴影参数-css教程-PHP中文网

用 $shadows Map 管理阴影配置可提升可控性与可维护性：定义命名化阴影等级（如 "sm"、"md"），统一单位（px）、引用颜色变量；配合 @function shadow($key) 转换为合法 box-shadow 值，确保全局一致更新。

如何通过scss快速生成阴影库_使用map存储css阴影参数

用 `$shadows` Map 定义阴影配置，比硬写 `box-shadow` 值更可控

直接在 SCSS 中写 box-shadow: 0 2px 4px rgba(0,0,0,0.1) 很快会失控——换色、调模糊度、改层级时全得手动搜改。用 Map 存阴影参数，本质是把「设计系统里的阴影等级」映射成可复用的命名键值对，比如 sm、md、lg，后续只需改一处 Map 就全局生效。

常见错误是把颜色写死在 Map 里，导致换主题时无法继承 $color-gray-200 这类变量；或把单位混用（px 和 rem 并存），造成缩放异常。

$shadows 必须用 map 类型，键名用短字符串（如 "sm"），值为包含 offset-x、offset-y、blur、spread、color 的子 map
所有长度值统一用 px，避免和 rem 混用；颜色字段必须引用已定义的颜色变量，不要写 #000 或 rgba(0,0,0,0.2)

示例结构：

$shadows: (
  "sm": (
    "offset-x": 0,
    "offset-y": 1px,
    "blur": 2px,
    "spread": 0,
    "color": $color-shadow-sm
  ),
  "md": (
    "offset-x": 0,
    "offset-y": 4px,
    "blur": 8px,
    "spread": 0,
    "color": $color-shadow-md
  )
);

用 `@function shadow()` 把 Map 键转成合法 `box-shadow` 值

不能靠 map-get($shadows, "sm") 直接输出样式，SCSS 不允许 map 值直接进属性值。必须封装函数做转换，核心是拼接字符串并确保空格、逗号、单位正确。

容易踩的坑是漏掉 !global 导致函数内无法访问外部颜色变量，或对 spread 字段没做空值判断（有些阴影不需要 spread，传 null 时函数应跳过该段）。

函数签名建议为 @function shadow($key)，返回字符串类型（@return 后跟引号包裹的拼接结果）
用 map-get() 取各字段，对 spread 做 if(map-has-key($config, "spread") and map-get($config, "spread")) 判断
拼接时注意：各值之间用空格分隔，color 放最后，不要多加逗号；示例返回值："0 1px 2px 0 $color-shadow-sm"

在选择器里调用 `shadow("md")`，而不是重复写整条 `box-shadow`

写 .card { box-shadow: shadow("md"); } 才算真正用起来。这时候如果设计规范调整了 md 阴影的 blur 值，只要改 $shadows 里对应项，所有用到 shadow("md") 的地方自动更新。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

典型误用是仍保留原始 box-shadow 写法，只在部分组件里试用函数，导致维护两套逻辑；或者把函数调用写在 @include 里再包装一层，增加不必要的抽象层级。

直接在 CSS 属性值位置调用，不包 @include，不设默认参数
支持多阴影叠加：如 box-shadow: shadow("sm"), shadow("inner");，前提是 $shadows 里定义了 "inner" 键且其 color 是 inset 兼容色
若需响应式阴影（如移动端降级为 "sm"），用 @media 内重写属性，不要在函数里加断点逻辑

导出 `shadow()` 函数供其他模块使用时，注意 `@use` 的加载顺序

当把阴影逻辑拆到 _shadows.scss 文件中，其他模块用 @use "shadows" as shadow 引入时，$shadows Map 和 shadow() 函数必须在同一文件内定义，且 Map 要在函数前声明——否则函数编译时报 Undefined variable。

另一个易忽略点：如果主文件先 @use "colors"，而 $shadows 里引用了 $colors 变量，那 _shadows.scss 必须显式 @use "colors"，不能依赖父文件的导入顺序。