less简介
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。
我个人觉得使用less在书写大量的样式代码时显得十分重要，它通过变量、继承、混合、嵌套等语言特性，会极大提高css的书写效率，而且它的代码结构很好地保持了html的文档结构，也更加清晰易读！
基于node.js的less
通过npm安装
npm install less -g
命令行用法示例
lessc style.less style.css
变量
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
| @w:100px;
@outw:@w+200px;
@pos:position;
@o:.outBox;
@color:lightgreen;
@prop:color;
@{o} {
@{pos}:relative;
width:@outw;
height:@outw;
background-color:lightcyan;
margin:60px auto;
border:1px solid @color;
.box1 {
@{pos}: absolute;
width:@w;
height:@w;
background-@{prop}:lightsalmon;
left:50%;
top:10%;
margin-left:-50px;
}
.box2 {
@{pos}: absolute;
width:@w;
height:@w;
background-@{prop}:rgb(122, 206, 255);
left:50%;
bottom:10%;
margin-left:-50px;
}
}
|
编译后
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
| .outBox {
position: relative;
width: 300px;
height: 300px;
background-color: lightcyan;
margin: 60px auto;
border: 1px solid lightgreen;
}
.outBox .box1 {
position: absolute;
width: 100px;
height: 100px;
background-color: lightsalmon;
left: 50%;
top: 10%;
margin-left: -50px;
}
.outBox .box2 {
position: absolute;
width: 100px;
height: 100px;
background-color: #7aceff;
left: 50%;
bottom: 10%;
margin-left: -50px;
}
|
嵌套
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
| .posit {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
}
.outBox {
position: relative;
width: 300px;
height: 300px;
background-color: lightcyan;
margin: 60px auto;
border: 1px solid lightgreen;
.box1 {
.posit();
background-color: lightsalmon;
top: 10%;
transition:all 1s;
&:hover {
border-radius:50%;
}
}
.box2 {
.posit();
background-color: #7aceff;
bottom: 10%;
transition:all 0.6s;
&:hover {
border-top-left-radius:50%;
border-bottom-right-radius:50%
}
}
}
|
编译后
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
| .posit {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
}
.outBox {
position: relative;
width: 300px;
height: 300px;
background-color: lightcyan;
margin: 60px auto;
border: 1px solid lightgreen;
}
.outBox .box1 {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
background-color: lightsalmon;
top: 10%;
transition: all 1s;
}
.outBox .box1:hover {
border-radius: 50%;
}
.outBox .box2 {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
background-color: #7aceff;
bottom: 10%;
transition: all 0.6s;
}
.outBox .box2:hover {
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
}
|
混合
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
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
| .postio {
position: absolute;
width:100px;
height:100px;
left:50%;
margin-left:-50px;
}
.outBox {
position:relative;
width:300px;
height:300px;
background-color:rgb(240, 192, 177);
margin:60px auto;
.box1 {
.postio();
background-color:rgb(24, 151, 151);
top:10%;
}
.box2 {
.postio();
background-color:rgb(17, 113, 168);
bottom:10%;
}
}
|
编译后
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
| .postio {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
}
.outBox {
position: relative;
width: 300px;
height: 300px;
background-color: #f0c0b1;
margin: 60px auto;
}
.outBox .box1 {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
background-color: #189797;
top: 10%;
}
.outBox .box2 {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
background-color: #1171a8;
bottom: 10%;
}
|
继承
less代码
1
2
3
4
5
6
7
8
| #main {
width:100px;
height:100px;
&:extend(.lineColor);
}
.lineColor {
background-color:lightcoral;
}
|
编译后
1
2
3
4
5
6
7
8
9
| #main {
width: 100px;
height: 100px;
}
.lineColor,
#main {
background-color: lightcoral;
}
|
运算
less代码
1
2
3
4
5
6
7
| .posit {
position: absolute;
width: 50+50px;
height: 100px;
left: 50%;
margin-left: -50px;
}
|
编译后
1
2
3
4
5
6
7
| .posit {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
}
|
映射
从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
less代码
1
2
3
4
5
6
7
8
9
10
11
| .setm(){
prak:rgb(88, 192, 192);
thal:#f00;
}
.outBox {
width: 300px;
height: 300px;
background-color: .setm[prak];
margin: 60px auto;
border:2px solid .setm[thal];
}
|
编译后
1
2
3
4
5
6
7
8
| .outBox {
width: 300px;
height: 300px;
background-color: #58c0c0;
margin: 60px auto;
border: 2px solid #f00;
}
|
作用域
- Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
- 与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义
- 所以对于局部变量来讲，要等到变量加载完毕后做决定
转义
转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~”anything” 或 ~’anything’ 形式的内容都将按原样输出
less代码
1
2
3
4
| @media (min-width:768px) {
width:750px;
height:~"min-height"
}
|
编译后
1
2
3
4
5
| @media (min-width: 768px) {
width: 750px;
height: min-height;
}
|