scss边框状态需在编译期通过map+函数+@if实现条件分支；函数必须返回真实颜色值，输入须为color类型，状态逻辑嵌入@each循环，边框参数应分层存储于子map中。
SCSS 不能在运行时动态计算边框状态，但可以在编译期用逻辑运算 + Map + 函数组合出带条件分支的边框规则；关键不是“实时响应”，而是“按配置生成不同状态下的合法 CSS”。
边框颜色逻辑必须封装进函数，且返回真实颜色值
你不能写 border-color: myBorderFunc($state) 然后指望它在浏览器里根据 JS 状态重算——Sass 函数只执行一次，输出静态 CSS。必须用内置函数如 darken()、transparentize() 直接运算，确保返回值是 #3498db 或 rgba(52, 152, 219, 0.8) 这类浏览器可解析的颜色。
- 错例：
@function border-state($color, $mode) { @return '#{$mode}-' + $color; }→ 返回字符串，CSS 解析失败 - 正例：
@function border-hover($base) { @return darken($base, 15%); }→ 返回真实颜色 - 所有输入参数必须是
color类型；传字符串进来要先用to-color($str)转换，且仅支持"#fff"、"blue"这类标准格式
状态分支要用 @if 写在循环体内，不能靠外部变量驱动
比如按钮有 :hover、:disabled、:focus 三种边框行为，别试图用一个全局 $border-mode 变量控制全部——它在编译时就固定了。正确做法是把状态判断塞进 @each 循环里，和当前变体的配置共用上下文。
- 在
@each $type, $props in $button-variants内部写：&:hover { border-color: border-hover(map-get($props, "border")); } - 如果某变体没定义
"border"，先加守卫：@if map-has-key($props, "border") { ... }，避免map-get()返回null导致编译中断 - 别把
&:hover提到循环外——那样所有按钮都会套用同一套逻辑，失去定制性
边框粗细与状态联动时，Map 结构要分层设计
单纯用 list 存颜色（如 (#007bff, #fff)）撑不起多维状态。需要把边框相关参数单独抽成子 Map，例如：
$button-variants: (
"primary": (
"bg": #007bff,
"text": #fff,
"border": (
"normal": 2px solid #0056b3,
"hover": 2px solid #004085,
"disabled": 2px solid #adb5bd
)
),
"outline": (
"bg": transparent,
"text": #007bff,
"border": (
"normal": 2px solid #007bff,
"hover": 2px solid #0056b3,
"disabled": 2px solid #ced4da
)
)
);
- 取值时用嵌套
map-get(map-get($props, "border"), "hover") - 这样新增一种状态（比如
"focus-visible"）只需改 Map，不碰样式逻辑 - 避免把所有状态硬编码进函数参数，否则每次加状态都要改函数签名和调用点
容易被忽略的兼容性细节
深色背景上用 lighten($color, 20%) 很可能生成灰白不可读的边框；浅色背景上用 darken() 又容易黑死。这不是函数问题，而是语义误配。
- 对深色主题（如
#34495e），优先用darken()做 hover 加深，而不是提亮 - 对浅色主题（如
#ecf0f1），hover 用lighten()才合理 - 更稳妥的做法：为每个变体单独设偏移策略，比如
"border-shift": ("hover": "darken", "amount": 12%)，再在函数里做分支处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
