混合：
混合可以将一个定义好的classA轻松的引入到另一个classB中，从而简单实现classB继承classA中的所有属性。任何CSS中的class或者id都可以引入
Less：
|
1
2
3
4
5
6
|
.aWidth{width:400px;}
#aHeight{height:600px;}
p{ .aWidth;
#aHeight;
} |
CSS：
|
1
2
3
4
5
6
7
8
9
10
|
.aWidth { width: 400px;
}#aHeight { height: 600px;
}p { width: 400px;
height: 600px;
} |
带选择器的混合集：
混合集不仅可以包含各种属性，而且可以包含各种选择器
Less：
|
1
2
3
4
5
6
7
8
|
.my-hover-mixin(){//加个空括号，不执行这段代码的编译 &:hover{
border:1px solid #ddd;
}
}button{ .my-hover-mixin;
} |
CSS：
|
1
2
3
|
button:hover { border: 1px solid #ddd;
} |
不输出混合集：
如果你想创建一个混合集，但是却不想让它输出到你的样式中，你可以在混合集的名字后面加一个括号。这句话怎么理解呢？对比以下两段代码：
代码一：
Less：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.my-mixin{ color:black;
}/*看这里*/.my-other-mixin{ background:white;
}.class{ .my-mixin;
/*看这里*/
.my-other-mixin;
} |
CSS：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.my-mixin { color: black;
}/*看这里*/.my-other-mixin { background: white;
}.class { color: black;
/*看这里*/
background: white;
} |
代码二：
Less：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.my-mixin{ color:black;
}/*看这里*/.my-other-mixin(){ background:white;
}.class{ .my-mixin;
/*看这里*/
.my-other-mixin;
} |
CSS：带空括号的混合集并没有编译过来，但是可以编译到另一个引用它的选择器里面
|
1
2
3
4
5
6
7
8
9
|
.my-mixin { color: black;
}/*看这里*/.class { color: black;
/*看这里*/
background: white;
} |
我们还可以带参数的调用，就像使用函数一样
Less：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.filter(@blur){ -webkit-filter:blur(@blur);
-moz-filter:blur(@blur);
-ms-filter:blur(@blur);
filter:blur(@blur);
}.border-radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}#section{ .border-radius;
/*如果写公共样式的时候没有设定具体的数值，引用的时候就必须设定，否则出不来效果*/
.filter(5px);
}#footer{.border-radius(10px);}
|
CSS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
#section { -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*如果写公共样式的时候没有设定具体的数值，引用的时候就必须设定，否则出不来效果*/
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}#footer { -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} |
带多个参数的混合
参数可以用逗号或分号分隔，但是推荐用分号分隔。
定义多个具有相同名称和参数数量的mixins是合法的，less会使用它可以使用的属性。如果使用mixin的时候只带一个参数，比如.mixin(red)，这个属性会导致所有的mixin都会强制使用这个明确的参数：
Less：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.mixin(@color) { color-1: @color;
}.mixin(@color; @padding: 2px) {
color-2: @color;
padding-2: @padding;
}.mixin(@color; @padding; @margin: 5px) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}h1{
.mixin(red);
}div{ .mixin(green;4px);
}span{ .mixin(blue; 6px; 8px);
} |
CSS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
h1 {
color-1: #ff0000;
color-2: #ff0000;
padding-2: 2px;
}div { color-2: #008000;
padding-2: 4px;
color-3: #008000;
padding-3: 4px;
margin: 5px 5px 5px 5px;
}span { color-3: #0000ff;
padding-3: 6px;
margin: 8px 8px 8px 8px;
} |
命名参数
引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值，任何参数都通过它的名称来引用，而不是特定的顺序
Less：
|
1
2
3
4
5
6
7
8
9
10
11
|
.mixin(@color:blue; @padding:10px; @margin:15px;){
color:@color;
padding:@padding;
margin:@margin;
}.class1{
.mixin(@margin:20px; @color:#e4393c;)
}.class2{
.mixin(#bf6da5; 60px;)
} |
CSS：
|
1
2
3
4
5
6
7
8
9
10
|
.class1 {
color: #e4393c;
padding: 10px;
margin: 20px;
}.class2 {
color: #bf6da5;
padding: 60px;
margin: 15px;
} |
@arguments变量
arguments在Javascript中代表所有的参数，在这里也是同样的意思，只不过用法稍有区别。如果你不想单个单个的处理参数，这一特性是很有用的：
Less：
|
1
2
3
4
5
6
7
8
|
.box-shadow(@x:0; @y:0; @blur:1px; @color:#000;){
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}.big-block{
.box-shadow(2px; 5px;)
} |
CSS：
|
1
2
3
4
5
|
.big-block {
-webkit-box-shadow: 2px 5px 1px #000000;
-moz-box-shadow: 2px 5px 1px #000000;
box-shadow: 2px 5px 1px #000000;
} |
!important关键字
在调用的混合集后面追加!important关键字，可以使混合集里面所有的属性都继承!important
Less：
|
1
2
3
4
5
6
7
8
9
10
|
.foo(@bg:#f00, @color:#666){
background:@bg;
color:@color;
}.unimportant{ .foo;
}.important{ .foo !important;
} |
CSS：
|
1
2
3
4
5
6
7
8
|
.unimportant { background: #ff0000;
color: #666666;
}.important { background: #ff0000 !important;
color: #666666 !important;
} |
在这里，也可以体验一把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
|
@pink:#f0f;
#header{ h2{
font-size:26px;
font-weight:bold;
}
.sub_title{
color:@pink;
}
.study_list{
color:@pink+111;
}
p{
font-size:12px;
a{
text-decoration: none;
&:hover{
border-width:1px;
color:@pink+666;
}
}
}
} |
CSS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
#header h2 {
font-size: 26px;
font-weight: bold;
}#header .sub_title { color: #ff00ff;
}#header .study_list { color: #ff6fff;
}#header p { font-size: 12px;
}#header p a { text-decoration: none;
}#header p a:hover { border-width: 1px;
color: #ffffff;
} |
示例二
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
|
@url:"../images";
.filter(@blur){ -webkit-filter:blur(@blur);
-moz-filter:blur(@blur);
-ms-filter:blur(@blur);
filter:blur(@blur);
}.border-radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}#loginForm{ width:80%;
margin:0 auto;
ul{
li{
margin:15px 0;
&:nth-child(2){
position:relative;
}
label{
color:#d4d2d2;
font-family:'Microsoft Yahei';
font-weight:bold;
font-size:1.1em;
}
}
}
.imgBground{
width:100%;
height:28vh;
filter:url(blur.svg#blur);
.filter(5px);
.border-radius(10px);
background:url('@{url}/1.jpg');
}
|
CSS:
|
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
|
#loginForm { width: 80%;
margin: 0 auto;
}#loginForm ul li { margin: 15px 0;
}#loginForm ul li:nth-child(2) {
position: relative;
}#loginForm ul li label { color: #d4d2d2;
font-family: 'Microsoft Yahei';
font-weight: bold;
font-size: 1.1em;
}#loginForm .imgBground { width: 100%;
height: 28vh;
filter: url(blur.svg#blur);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: url('../images/1.jpg');
} |
详情参考官方文档：
http://www.css88.com/doc/less/features/#mixins-feature
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1862989