Less &引用;“添加剂”;具有较少混合的属性值

Less &引用;“添加剂”;具有较少混合的属性值,less,Less,我正在寻找一个功能,可能是或可能不是在更少的可用性 我有一个mixin,它添加了一个带有方框阴影的“辉光”,我在各种元素上使用它——按钮、输入等等 .glow() { box-shadow: 0 0 5px skyBlue; } 我要寻找的是一种方法,如果元素已经有一个方框阴影,那么可以让mixin将方框阴影添加为一个新的逗号分隔值 所以,我想要这个: .button { box-shadow: inset 0 5px 10px black; .glow(); } .

我正在寻找一个功能,可能是或可能不是在更少的可用性

我有一个mixin,它添加了一个带有方框阴影的“辉光”,我在各种元素上使用它——按钮、输入等等

.glow() {
    box-shadow: 0 0 5px skyBlue;
}
我要寻找的是一种方法,如果元素已经有一个方框阴影,那么可以让mixin将方框阴影添加为一个新的逗号分隔值

所以,我想要这个:

.button {
    box-shadow: inset 0 5px 10px black;
    .glow();
}
.button {
    box-shadow: inset 0 5px 10px black, 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中看到过类似的功能,但现在我在任何地方都找不到


此功能是否以较少的形式存在,或者是否有其他方法可以实现类似的结果?

您正在寻找的功能是。你应该这样做:

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

谢谢,错过了那个。现在修好了。