目录：
Less 01 准备工作
Less 02 变量（Variable）
Less 03 扩展（Extend）
Less 04 混入（Mixins）
Less 05 参数混入（Parametric Mixins）
Less 06 方法混入 （Mixins as Functions）
Less 07 CssRules 直接混入（Passing Rulesets to Mixins）
Less 08 导入（Import）
Less 09 守卫（Guards）
Less 10 其他操作（完结）
Loops
less的mixin可以递归调用自身
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}
div {
.loop(5); // launch the loop
}
输出
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
可以利用这点来创建一些公共的样式，比如bootstrap的col-md-1
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
输出
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
Merge
可以进行一个样式的合并
Comma
.mixin() {
box-shadow+: inset 0 0 10px #555;
}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}
输出
.myclass {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
Space
.mixin() {
transform+_: scale(2);
}
.myclass {
.mixin();
transform+_: rotate(15deg);
}
.myclass {
transform: scale(2) rotate(15deg);
}
