“添加剂" LESS mixin的属性值 [英] "Additive" property values with 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的属性值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!