演示
- 正常状态
- 鼠标悬浮状态
- 点击状态
演示为第一个区域(红色按钮)
front
在我们进行前端开发时,如果用纯CSS实现这种鼠标悬浮时变深,点击变浅很容易(:hover,:focus),但是数量一多,写起来就非常恶心,所以我们可以用scss来完成这种效果。
scss-codes
.all{ //通用属性
width: 60px;
height: 60px;
margin: 20px;
display: inline-block;
border-radius: 10px;
outline: none; //禁止点击时出现外边
border: none; //禁止边框
}
$list: rgb(255, 0, 0),rgb(255, 217, 0),rgb(0, 38, 255),rgb(0, 255, 255); //颜色数组,可以使用HEX,rgb,这里最好不要用rgba
@for $i from 1 through 4{ //through后的数字是要创建div的个数
.ml-#{$i}{ //如ml-1,ml-2,ml-3
@extend .all; //继承.all
font-size: 10px * $i;
background-color: nth($list,$i); //设置默认背景颜色,此处会调用颜色数组中对应的颜色
color: white;
transition: all 0.3s; //添加动画效果
$color: nth($list,$i); //将对应颜色创建变量$color,避免出现重复语句
&:hover{ //鼠标悬浮
background: darken($color,20%); //亮度减淡20%
}
&:active{ //鼠标点击
background: lighten($color,20%); //亮度提升20%
}
}
}
css-codes
编译后的结果:
.all, .ml-1, .ml-2, .ml-3, .ml-4 {
width: 60px;
height: 60px;
margin: 20px;
display: inline-block;
border-radius: 10px;
outline: none;
border: none;
}
.ml-1 {
font-size: 10px;
background-color: red;
color: white;
transition: all 0.3s;
}
.ml-1:hover {
background: #990000;
}
.ml-1:active {
background: #ff6666;
}
.ml-2 {
font-size: 20px;
background-color: #ffd900;
color: white;
transition: all 0.3s;
}
.ml-2:hover {
background: #998200;
}
.ml-2:active {
background: #ffe866;
}
.ml-3 {
font-size: 30px;
background-color: #0026ff;
color: white;
transition: all 0.3s;
}
.ml-3:hover {
background: #001799;
}
.ml-3:active {
background: #667dff;
}
.ml-4 {
font-size: 40px;
background-color: cyan;
color: white;
transition: all 0.3s;
}
.ml-4:hover {
background: #009999;
}
.ml-4:active {
background: #66ffff;
}
end
这样就实现了按钮颜色加深减淡功能,来对比一下代码的行数:
我们使用了27行scss代码就能编译出71行的css代码,这样大大增加了工作效率,并且颜色暗淡都是自动生成的。
如何将scss代码应用在html中
通过scss编译器将scss编译后得到css文件,使用html中的link标签就可以将该css文件加进html中。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。