为 box-shadow 编写 LESS mixin：none

Question

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

下面是box-shadow

的Mixin

.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 调用相同的 mixin：none

Answer 1

.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);
}

Answer 2

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

你可以这样写你的 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 3

.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中定义同名不同参数的mixin。 "override" 你的 mixin 和 Less 会找到一个具有相同参数模式的。

为 box-shadow 编写 LESS mixin：none

writing LESS mixin for box-shadow: none

css

less