"Additive" 属性使用 LESS 混合的值

Question

我正在寻找 LESS 可能提供或不提供的功能。

我有一个 mixin，它添加了 "glow" with box-shadow，我在各种元素上使用它 - 按钮、输入等。

.glow() {
    box-shadow: 0 0 5px skyBlue;
}

我正在寻找的是一种方法，如果元素已经有框阴影，则可以让混音将框阴影添加为新的逗号分隔值。

所以，我想要这个：

.button {
    box-shadow: inset 0 5px 10px black;
    .glow();
}

要编译成这样：

.button {
    box-shadow: inset 0 5px 10px black, 0 0 5px skyBlue;
}

我想我记得在 SASS 中看到过类似的功能，但我现在找不到它了。

LESS 中是否存在此功能，或者是否有其他方法可以实现类似的结果？

Answer 1

您要查找的功能是 merge。你会这样做：

.glow() {
    box-shadow+: 0 0 5px skyBlue;
}
.button {
    box-shadow+: inset 0 5px 10px black;
    .glow();
}

请注意，两个规则集都需要使用 + 语法才能正常工作。

或者，您可以将发光规则声明为变量：

@glow: 0 0 5px skyBlue;

.button {
    box-shadow: inset 0 5px 10px black, @glow;
}

"Additive" property values with LESS mixin