mixin方法:一堆属性从一个规则集到另一个规则集。
1、
编辑less:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
输出css:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
2、类选择器和id选择器
编辑less:
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
生成css:
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}
3、不输出混合
编辑less:
.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
生成css:
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
3、混合属性
编辑less:
.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
生成css:
button:hover {
border: 1px solid red;
}
4、复杂选择器混合属性(减少类名冲突)
编辑less:
#outer {
.inner {
color: red;
}
}
.c {
#outer > .inner;
}
生成css:
#outer .inner {
color: red;
}
.c {
color: red;
}