应使用语义化变量和参数化@mixin封装边框与阴影，避免写死值；通过$shadow-sm等变量统一管理阴影、$border-light等变量适配深色模式，并分离$radius、$dash-array等参数确保灵活复用与高dpi兼容。
直接用 @mixin 封装边框和阴影逻辑，比写一堆重复的 border 和 box-shadow 值更省事、更可控。硬编码会逼你每次改设计都全局搜索替换，漏一处就风格不一致。
为什么不能把边框和阴影写死在 mixin 里
写死值（比如 border: 1px solid #e0e0e0 + box-shadow: 0 2px 4px rgba(0,0,0,.1)）看似快，实际埋了三个坑：
- 设计改了主色或阴影强度，得翻遍所有
@include调用点手动改 - 深色模式下无法自动切换——
rgba(0,0,0,.1)在黑底上几乎不可见 - 不同组件需要不同组合（如按钮要 hover 加粗边框、卡片要 inset 阴影），写死 mixin 无法灵活响应
边框参数怎么设计才不踩坑
拆开写比用 border 简写更安全，也方便单独覆盖：
- 宽度用
$width: 1px，但支持传0.0625rem或2px——Sass 能自动单位归一化 - 颜色默认用
$color: currentColor，让边框自动继承文字色，按钮/输入框复用时不用额外传色 - 样式别只支持
solid，加dashed和none；虚线密度靠$dash-array控制，避免 Safari 渲染异常 - 圆角必须独立参数
$radius: 0，不和边框耦合——卡片要8px，按钮可能要4px或9999px
阴影该用变量还是函数
90% 的项目用语义化变量就够了：$shadow-sm、$shadow-md、$shadow-card。别一上来就写 @function shadow($key)：
- 变量编译快、IDE 补全友好、调试直观；函数容易返回字符串而非合法 list，导致
box-shadow: #{shadow('lg')}编译失败 - 命名按视觉角色（
$shadow-modal-backdrop）而不是像素（$shadow-4），设计调参时只需改变量定义，不用动组件代码 - 多层阴影值（如
0 4px 6px -1px rgba(...), 0 2px 4px -1px rgba(...)）必须用unquote()包裹再插值，否则 Sass 会当成字符串拼接出非法 CSS
怎么让边框+阴影真正适配深色模式
不是简单换 rgba(255,255,255,.1)，关键在 alpha 和 base color 的协同策略：
- 同一变量（如
$shadow-md）在浅色主题文件里指向0 4px 6px -1px rgba(0,0,0,.1)，在深色主题里指向0 4px 6px -1px rgba(255,255,255,.08)——@mixin完全不用改 - 边框色建议用中性灰阶变量（
$border-light/$border-dark），而不是直接写#ccc；深色模式下它自动切到#333 - 注意 WCAG 对比度：阴影 alpha 值在深色背景上至少保持 .06 以上，否则在暗 UI 中“消失”
最易被忽略的是性能和可访问性：三层叠加的 box-shadow 在滚动列表里会轻微拖慢渲染；而过淡的阴影在暗色模式下可能让卡片边界难以识别——这些没法靠 Sass 自动修复，得靠设计系统提前约定阈值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
