# less
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
Less 到底为 CSS 添加了什么功能？以下就是这些新加功能的概览。
# 1、变量
@width: 10px;
@height: @width + 10px;
.header {
width: @width;
height: @height;
}
// 编译为
.header {
width: 10px;
height: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 2、嵌套
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3、混合器
// 定义
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
// 使用
.menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 4、注释
/* 一个块注释
* style comment! */
@var: red;
// 这一行被注释掉了！
@var: white;
1
2
3
4
5
6
2
3
4
5
6
# 5、导入
@import "library"; // library.less
@import "typo.css";
1
2
2
# 6、for 循环
.loop(@count) when (@counter > 0) {
.loop((@counter - 1)); // 递归调用自身
width: (10px * @counter); // 每次调用时产生的样式代码
}
1
2
3
4
2
3
4
# 7、参考
https://less.bootcss.com/