＆＃34;添加剂＆＃34; LESS mixin的属性值

Question

我正在寻找可能在LESS中可用或不可用的功能。

我有一个混合物，可以添加一个＆＃34;发光＆＃34;使用box-shadow，我在各种元素上使用 - 按钮，输入等。

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

我正在寻找的方法是让mixin将box-shadow添加为新的逗号分隔值，如果该元素已经有了box-shadow。

所以，我想要这个：

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