前言
啦啦啦，好久没有写Wiki了，已然成为了一名 Web 开发工程师，上周在写业务的时候用到了 less，周末了，过来总结下吧。
Less ？
Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。
Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。
例如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| @base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
|
编译为：
1
2
3
4
5
6
7
8
| .box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
|
开始
如果是独立使用的话，首先安装 less
手写一个 less 文件
1
| echo '.test { height: (1+1) }' > styles.less
|
编译 less 文件，输出 css 文件
输出
更多姿势
变量以 @ 开头
变量
1
2
3
4
5
| @color: white;
.link {
color: @color;
}
|
编译输出
1
2
3
| .link {
color: white;
}
|
插值
1
2
3
4
5
6
| @property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
|
编译输出
1
2
3
4
| .widget {
color: #0ee;
background-color: #999;
}
|
混合
混合可以是直接使用class或者id选择器
1
2
3
4
5
6
7
8
9
| .a, #b {
color: red;
}
.mixin-class {
.a(); // 使用的时候 ➕不加 `()` 都一样的！
}
.mixin-id {
#b();
}
|
编译输出
1
2
3
4
5
6
7
8
9
| .a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}
|
不输出混合集
选择器带了括号，则编译后不输出
1
2
3
4
5
6
7
8
9
10
| .my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
|
输出：
1
2
3
4
5
6
7
| .my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
|
带参数的混合
1
2
3
4
5
6
7
8
| .border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius;
}
|
输出：
1
2
3
4
5
| #header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
|
导入
可以通过 @import 导入 less，css 文件
1
2
3
4
| // this-is-valid.less
.foo {
background: #900;
}
|
使用
1
| @import "this-is-valid.less";
|
编译输出
Guard
使用 when 进行判断
1
2
3
4
5
6
7
8
9
10
11
12
| .mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
|
编译输出
1
2
3
4
5
6
7
8
| .class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
|
循环
1
2
3
4
5
6
7
8
| .loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // 递归调用自身
width: (10px * @counter); // 每次调用时产生的样式代码
}
div {
.loop(5); // 调用循环
}
|
编译输出
1
2
3
4
5
6
7
| div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
|
合并
1
2
3
4
5
6
7
| .mixin() {
box-shadow+: inset 0 0 10px #555;
}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}
|
编译输出
1
2
3
| .myclass {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
|
思考
王境泽-真香！
参考
https://www.html.cn/doc/less
