sass 生成辅助色

背景

一个按钮往往有 4 个状态。

1. 默认状态
2. hover
3. 鼠标按下
4. 禁用状态

为了表示这 4 个状态，需要设置 4 个颜色来提示用户。

按钮类型一般有 5 个：

以 primary 类型按钮为例，设置它不同状态下的颜色：

<button class="btn type--primary">Primary</button><style>
.btn {width: 100px;height: 40px;border: none;border-radius: 5px;
}
.btn.type--primary { /* 基础色 */background-color: #409eff;color: #ffffff;/* hover */&:hover {background-color: #79bbff;}/* 鼠标按下 */&:active {background-color: #337ecc;}/* 禁用状态 */&:disabled {background-color: #a0cfff;}
}
</style>

一个按钮就要设置 4 个颜色，5 个类型的按钮就是 20 种颜色，显然要设计出这 20 种颜色非常麻烦。（如果有设计师直接提供设计好的颜色，那么就定义变量直接用。）

因此希望只需给按钮设置一个基本颜色，其他状态的颜色可以根据这个基本颜色自动生成。

sass 调整颜色亮度

按钮不同状态的颜色，其实是修改了按钮基础颜色的亮度。比如:

• hover 就是基础色变亮一点，
• active 就是基础色变暗
• disabled 就是基础色比 hover 还要更亮一点，文字也要更亮。

sass 中提供了工具函数可以便捷的修改颜色的亮度。

引入 sass 的颜色模块，里面有很多实用的工具函数。

@use sass:color

但我们这里不需要引入。因为我们主要使用颜色函数中的变亮，变暗函数。这两个函数已经变成全局的了，可以直接用。

• 变亮：lighten(颜色, 百分比)
• 变暗：darken(颜色, 百分比)

.btn {width: 100px;height: 40px;border: none;border-radius: 5px;
}.btn.type--primary {$primary-color: #409eff;$primary-text-color: #ffffff;color: $primary-text-color;background-color: $primary-color;&:hover {background-color: lighten($primary-color, 10%);}&:active {background-color: darken($primary-color, 10%);}&:disabled {background-color: lighten($primary-color, 20%);color: lighten($primary-text-color, 40%);}
}

进阶：循环优化

上面以 primary 类型按钮为例的代码已经实现了自动生成其他状态颜色的目标。但我们还可以用循环优化一下，省得每个按钮类型重复写上面的代码。

• $var: (key: value)：括号定义对象（map)
• map-keys：返回 key 组成的数组（list），类似 Object.keys()
• @each ... in ...：遍历数组，类似数组高阶函数 map
• #{}：插值表达式，类似模板字符串

<button class="btn type--primary">Primary</button>
<button class="btn type--success">Success</button>
<button class="btn type--warning">Warning</button>
<button class="btn type--danger">Danger</button>
<button class="btn type--info">Info</button><style lang="scss">
.btn {width: 100px;height: 40px;border: none;border-radius: 5px;
}/* 定义按钮类型颜色对象 */
$btn-color-map: (primary: #409eff,success: #67c23a,warning: #e6a23c,danger: #f56c6c,info: #909399
);/* 生成 .btn.type--primary{}，.btn.type--success{} 等样式选择器下的样式 */
@each $type in map-keys($btn-color-map) {$btn-color: map-get($btn-color-map, $type);.btn.type--#{$type} {$bg-color: $btn-color;$text-color: #ffffff;color: $text-color;background-color: $bg-color;&:hover {background-color: lighten($bg-color, 10%);}&:active {background-color: darken($bg-color, 10%);}&:disabled {color: lighten($text-color, 40%);background-color: lighten($bg-color, 20%);}}
}
</style>

完整代码

主要功能已经实现了，这里只是补充了下按钮的通用样式。

/*************** start ****************//* 按钮全局样式，包括5中类型 *//***********************************   */
.btn {box-sizing: border-box;display: inline-flex;align-items: center;justify-content: center;height: 32px;padding: 8px 15px;margin-left: 12px;font-size: 14px;font-weight: 500;line-height: 1;text-align: center;white-space: nowrap;vertical-align: middle;appearance: none;cursor: pointer;user-select: none;border: 1px solid #dcdfe6;border-radius: 5px;outline: none;transition: .1s;
}/* 定义按钮类型颜色对象 */
$btn-color-map: (primary: #409eff,success: #67c23a,warning: #e6a23c,danger: #f56c6c,info: #909399
);/* 生成 .btn.type--primary{}，.btn.type--success{} 等样式选择器下的样式 */
@each $type in map-keys($btn-color-map) {$btn-color: map-get($btn-color-map, $type);.btn.type--#{$type} {$bg-color: $btn-color;$text-color: #ffffff;color: $text-color;background-color: $bg-color;border-color: $bg-color;&:hover {background-color: lighten($bg-color, 10%);}&:active {background-color: darken($bg-color, 10%);}&:disabled {color: lighten($text-color, 40%);background-color: lighten($bg-color, 20%);}}
}/***************  end  ****************/