“添加剂" LESS mixin的属性值

问题描述

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

I'm looking for a feature that may or may not be available in LESS.

我有一个mixin，它在框阴影中添加了一个辉光"，我在各种元素(按钮，输入等)上使用了它.

I have a mixin that adds a "glow" with box-shadow, which I use on various elements - buttons, inputs etc.

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

我正在寻找的一种方法是使mixin将框阴影添加为新的逗号分隔值(如果元素已经具有框阴影的话).

What I'm looking for is a way to make the mixin add the box-shadow as a new comma-seperated value if the element already has a box-shadow.

所以，我想要这个:

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

要对此进行编译:

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

我想我记得在SASS中看到过类似的功能，但是现在在任何地方都找不到.

I think I recall seeing a similar feature in SASS, but I can't find it anywhere now.

此功能是否存在于LESS中，还是有其他替代方法可实现相似的结果?

Does this feature exist in LESS, or is there some alternative way to achieve a similar result?

推荐答案

您要查找的功能是合并.您可以这样做:

The feature you're looking for is merge. You'd do this:

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

请注意，两个规则集都必须使用+语法才能起作用.

Note that both rulesets need to use the + syntax for it to work.

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

Or, you could declare the glow rule as a variable:

@glow: 0 0 5px skyBlue;

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

这篇关于“添加剂" LESS mixin的属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！