Question

使用LESS css编写 box-shadow mixin时遇到问题。

以下是Mixin for box-shadow

.boxShadow (@x, @y, @blur, @spread: 0, @alpha) {
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow:    @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow:     @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

但我可以传递没有问题的参数，

.boxShadow(0, 0, 5px, 2px, 0.2);

但如何为 box-shadow：none

调用相同的mixin

Answer 1

有一种方法可以访问一个变量中的所有mixin参数。

你可以用这种方式写下你的LESS mixin：

.box-shadow(...)
{
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

稍后再使用：

.box-shadow(0 0 5px 2px rgba(0, 0, 0, 0.2));

或

.box-shadow(none);

Answer 2

.boxShadow(@x, @y, @blur, @spread: 0, @alpha) {
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
       -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
            box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.boxShadow(none) {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

重点是你可以在Less中定义具有相同名称但不同参数的mixins。只是＆＃34;覆盖＆＃34;你的mixin和Less会找到一个具有相同参数模式的。

Answer 3

.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow:    @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow:     @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

写LESS mixin for box-shadow：none

3 个答案: