# Less常用语法
less是css的预编译工具，帮助我们更好的编写维护css，其文件后缀名为less。
# 导入(Importing)
@import 'library' //等同于@import 'library.less
@import 'base.css'
1
2
2
# 注释
/*
* 块注释
*/
// 行注视
1
2
3
4
5
2
3
4
5
# 变量(Variables) & 运算(OPerations)
@width: 10px;
@baseSize: 200px;
@height: @baseSize + 10px;
@left: @baseSize + @width - 2px;
@top: @width * 2;
@marginLeft: @baseSize + @width / 2;
@marginTop: (@baseSize + @width) / 2;
#header {
width: @width;
height: @height;
positioin: absolut;
left: @left;
top: @top;
margin-left: @marginLeft;
margin-top: @marginTop;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
编译为
#header {
width: 10px;
height: 210px;
positioin: absolut;
left: 208px;
top: 20px;
margin-left: 205px;
margin-top: 105px;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 嵌套(Nesting)
#header {
color: black;
&:after{
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
编译为
#header {
color: black;
}
#header:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 混合(Mixins)
//普通 class
.class-a{
background-color: #fff;
}
// 定义为混淆,不会被编译成css
.my-other-mixin(@left:100px) {
height: 100px;
margin-left: @left;
}
.class-b{
width: 100px;
// 混入一个class
.class-a();
// 混入一个定义的混淆class
.my-other-mixin(120px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
编译为
.class-a {
background-color: #fff;
}
.class-b {
width: 100px;
background-color: #fff;
height: 100px;
margin-left: 120px;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Maps
@size: {
width: 10px;
height: 10px;
}
.con{
width: @size[width];
height: @size[height];
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
编译为
.con {
width: 10px;
height: 10px;
}
1
2
3
4
5
2
3
4
5
# 函数(Functions)
在Less中，函数可以分为内置函数和自定义函数，其中内置函数可以参考Less内置函数 (opens new window)，而自定义函数，需要借助less-plugin-functions (opens new window)
# 更详细的语法
更详细的语法可以参考lesscss (opens new window)