多个box-shadow参数的混合问题较少 [英] Less mixin issue for multiple box-shadow arguments
问题描述
我在一个项目中工作是我不得不使用，个人我总是使用手写笔，但我不能与这个项目，所以我有下一个问题。我怎么能这样做，我用手写笔，少用？问题是参数的数量。
box-shadow（）
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
.div {
box-shadow 0 2px 8px rgba（0，0，0，0.3），inset 0 1px rgba（255，255，255，0.2），inset 0 10px rgba（255，255，255，0.2），inset 0 10px 20px rgba （255，255，255，0.2），inset 0 -15px 30px rgba（0，0，0，0.2）
}
.div2 {
box-shadow 0 2px 8px rgba（0，0，0，0.3）
}
输出：
.div {
-webkit-box-shadow：0 2px 8px rgba（0,0,0,0.3） 0 1px rgba（255,255,255,0.2），inset 0 10px rgba（255,255,255,0.2），inset 0 10px 20px rgba（255,255,255,0.2），inset 0 -15px 30px rgba（0,0,0,0.2）;
-moz-box-shadow：0 2px 8px rgba（0,0,0,0.3），inset 0 1px rgba（255,255,255,0.2），inset 0 10px rgba（255,255,255,0.2），inset 0 10px 20px rgba （255,255,255,0.2），inset 0 -15px 30px rgba（0,0,0,0.2）;
box-shadow：0 2px 8px rgba（0,0,0,0.3），inset 0 1px rgba（255,255,255,0.2），inset 0 10px rgba（255,255,255,0.2），inset 0 10px 20px rgba（255,255,255， 0.2），inset 0 -15px 30px rgba（0,0,0,0.2）;
}
.div2 {
-webkit-box-shadow：0 2px 8px rgba（0,0,0,0.3）;
-moz-box-shadow：0 2px 8px rgba（0,0,0,0.3）;
box-shadow：0 2px 8px rgba（0,0,0,0.3）;
}
当前版本的LESS允许您使用逗号作为列表的分隔符，然后在参数的末尾放置一个单独的分号，以逗号分隔的列表的形式传递整个事件。所以这个现在可以工作（注意在右括号之前的结尾处加上分号。
.box-shadow（0 2px 8px rgba（0，0，0，0.3），inset 0 1px rgba（255，255，255，0.2），inset 0 10px rgba（255，255，255，0.2），inset 0 10px 20px rgba（255，255，255 ，0.2），inset 0 -15px 30px rgba（0，0，0，0.2）;）;
^ here
原始（前LESS 1.3.3）回答
这里是如何做LESS需要得到相同的输出：
.box-shadow（@shadows）{
-webkit-box-shadow：@shadows;
-moz-box- shadow：@shadows;
box-shadow：@shadows;
}
.div {
.box-shadow（〜0 2px 8px rgba 0,0,0,0.3），插入0 1px rgba（255,255,255,0.2），插入0 10px rgba（255,255,255,0.2），插入0 10px 20px rgba（255,255,255,0.2） inset 0 -15px 30px rgba（0，0，0，0.2））;
}
.div2 {
.box-shadow（0 2px 8px rgba（0，0，0，0.3））;
}
注意 code> .div ，您需要使用转义字符串作为单个参数传递它们，这是为什么第一次使用〜包围整个参数字符串。如果你只是传递一个阴影，这是没有必要的。 LESS需要在阴影组之间获取逗号。
I'm working in a project were i have to use less, personally I always use stylus, but I can't with this project, so I have the next question. how can i do this, that i'm doing with stylus, with less ? The problem is the number of arguments.
in stylus :
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
.div {
box-shadow 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)
}
.div2 {
box-shadow 0 2px 8px rgba(0, 0, 0, 0.3)
}
output :
.div {
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.2), inset 0 -15px 30px rgba(0,0,0,0.2);
}
.div2 {
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.3);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
LESS now
Current versions of LESS allow you to use commas as separators of lists, and then put a single semicolon at the end of the parameter to pass the whole thing as a comma separated list. So this now works (note the extra semicolon at the end right before the closing parenthesis.
.box-shadow(0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2););
^here
Original (pre LESS 1.3.3) Answer
Here's how LESS needs to be done to get the same output:
.box-shadow(@shadows) {
-webkit-box-shadow: @shadows;
-moz-box-shadow: @shadows;
box-shadow: @shadows;
}
.div {
.box-shadow(~"0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)");
}
.div2 {
.box-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
NOTE: To do multiple shadows as your .div, you need to pass them as a single argument using an escaped string, which is why the first use has ~" " surrounding the whole argument string. If you are just passing one shadow, that is not necessary. LESS needs that to get the commas between the shadow groups.
这篇关于多个box-shadow参数的混合问题较少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
