混合：
混合可以将一个定义好的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;
}
h
1
{
.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
|
h
1
{
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;
}
.class
1
{
.mixin(@
margin
:
20px
; @
color
:
#e4393c
;)
}
.class
2
{
.mixin(
#bf6da5
;
60px
;)
}
|
CSS：
|
1
2
3
4
5
6
7
8
9
10
|
.class
1
{
color
:
#e4393c
;
padding
:
10px
;
margin
:
20px
;
}
.class
2
{
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{
h
2
{
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 h
2
{
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
:
28
vh;
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
:
28
vh;
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
