一、less简单写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.content{
ul{
list-style: none;
}
li{
height: 15px;
line-height: 25px;
padding-left: 15px;
background: url("./images/arr.jpg") no-repeat center left;
}
a{
text-decoration: none;
color: #535353;
font-family: Microsoft YaHei, "黑体", Arial, SimSun, Arial Unicode MS, MingLiU, Helvetica;
}
}
|
这是less最基本的写法。和css样式表有点类似，但是又有不同，less的这种写法减少了css代码的冗余。
二、带变量的less写法
less的变量使用@加名字定义，列入定义@name。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| @green:green;
@size: 3rem;
@white: white;
header,footer{
background: @green;
font-size: @size;
h1{
color:@white;
}
}
@width: width;
.@{width}{
@{width}: 150px;
}
@imgUrl: "https://www.baidu.com/img";
header{
background:@green url('@{imgUrl}/bd_logo1.png');
height: 150px;
}
|
以上就是less的变量定义。使用变量的方式写less方便了后期样式的维护，只需修改变量值就可以改变整体样式。
三、less的函数定义
less还可以定义函数，使用函数更加方便了我们对样式的维护。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
.font-sty(){
color: red;
font-family: Microsoft YaHei, "黑体", Arial, SimSun, Arial Unicode MS, MingLiU, Helvetica;
}
h1{
font-size: 18px;
.font-sty
}
h2{
font-size: 16px;
.font-sty
}
.myButton(){
&:hover{
border: 1px solid #56ffcf;
}
}
button{
.myButton;
}
.border(@color) {
border: 1px solid @color;
}
h2 {
&:hover{
.border(green);
}
}
h1 {
&:hover{
.border(red);
}
}
.border_y(@color:#0fb9ff) {
border: 1px solid @color;
}
h1 {
&:hover{
.border_y();
}
}
|
以上编译后样式如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| h1 {
font-size: 18px;
color: red;
font-family: Microsoft YaHei, "黑体", Arial, SimSun, Arial Unicode MS, MingLiU, Helvetica;
}
h2 {
font-size: 16px;
color: red;
font-family: Microsoft YaHei, "黑体", Arial, SimSun, Arial Unicode MS, MingLiU, Helvetica;
}
button:hover {
border: 1px solid #56ffcf;
}
h2:hover {
border: 1px solid #008000;
}
h1:hover {
border: 1px solid #ff0000;
}
h1:hover {
border: 1px solid #0fb9ff;
}
|
学习less可以参考less中文站。
配合html运行后的结果如下。
