如何减少这段代码(可能是一个循环?),有一个“功能”,它需要方向和数字?
@dir
=想要的“方向”@number
=我需要阴影的次数(此处为10次)@color
=阴影的颜色示例(工作,但不是很容易使用):
.perspective-box(@dir, @number, @color) when (@dir = se){
-webkit-box-shadow:1px 1px 0 0 @color,
2px 2px 0 0 @color,
3px 3px 0 0 @color,
4px 4px 0 0 @color,
5px 5px 0 0 @color,
6px 6px 0 0 @color,
7px 7px 0 0 @color,
8px 8px 0 0 @color,
9px 9px 0 0 @color,
10px 10px 0 0 @color;
}
我有一个@dir
参数,可以改变阴影的方向。
在此示例中,我放置@dir = se
,其中se
=东南。对于西北,东北,西南和东南来说,情况也是如此。
.perspective-box(@dir, @number, @color) when (@dir = ne){
-webkit-box-shadow:10x North East shadow…
}
.perspective-box(@dir, @number, @color) when (@dir = nw){
-webkit-box-shadow:10x North West shadow…
}
.perspective-box(@dir, @number, @color) when (@dir = sw){
-webkit-box-shadow:10x South West shadow…
}
.perspective-box(@dir, @number, @color) when (@dir = se){
-webkit-box-shadow:10x South East shadow…
}
答案 0 :(得分:3)
没问题:
.text-shadow-3d(@x, @y, @index) when (@index > 0) {
// Loop-de-loop.
.text-shadow-3d(@x, @y, @index - 1);
// The '+' after 'text-shadow' concatenates with comma.
text-shadow+: @x*@index @y*@index 0 black;
}
.text-shadow-3d(1px, 1px, 5);
结果:
text-shadow: 1px 1px 0 #000000, 2px 2px 0 #000000, 3px 3px 0 #000000, 4px 4px 0 #000000, 5px 5px 0 #000000;
文档:
答案 1 :(得分:-1)
我几乎肯定这是不可能的,因为它没有语言结构这样做(因为我使用LESS已经有一段时间了,所以我可能错了)。另一方面,Sass可能能够做到这一点,因为它确实有循环和列表之类的东西(虽然看那里的选项,看起来处理可变数量的阴影可能非常难看。)