目录:
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 其他操作(完结)
Mixins as Functions
在mixin中定义的变量是可以被调用者使用的。这就像函数一样,会return一些值出去。当然又一个例外,如果调用者本身就有一个同名的变量,就不会再去copy了。
.mixin() {
@width: 100%;
@height: 200px;
}
.caller {
.mixin();
width: @width;
height: @height;
}
输出
.caller {
width: 100%;
height: 200px;
}
我们通过这一点,就可以去写一些我们的函数
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}
更加复杂一些的例子
.unlock(@value) { // outer mixin
.doSomething() { // nested mixin
declaration: @value;
}
}
#namespace {
.unlock(5); // unlock doSomething mixin
.doSomething(); //nested mixin was copied here and is usable
}
网友评论