模板型网站,网站建设和管理存在的问题,源码之家官方网,钓鱼网站的制作教程背景
一个按钮往往有 4 个状态。
默认状态hover鼠标按下禁用状态
为了表示这 4 个状态#xff0c;需要设置 4 个颜色来提示用户。
按钮类型一般有 5 个#xff1a;
以 primary 类型按钮为例#xff0c;设置它不同状态下的颜色#xff1a;
button classbtn…背景
一个按钮往往有 4 个状态。
默认状态hover鼠标按下禁用状态
为了表示这 4 个状态需要设置 4 个颜色来提示用户。
按钮类型一般有 5 个
以 primary 类型按钮为例设置它不同状态下的颜色
button classbtn type--primaryPrimary/buttonstyle
.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 classbtn type--primaryPrimary/button
button classbtn type--successSuccess/button
button classbtn type--warningWarning/button
button classbtn type--dangerDanger/button
button classbtn type--infoInfo/buttonstyle langscss
.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 ****************/
