如何减少这段代码(可能使用循环?),以拥有一个接受方向和数字的“函数”?
-
@dir
=想要的“方向”
-
@number
=我需要多少次影子(这里是10次)
-
@color
= 阴影的颜色
Example(可以工作,但不是很容易使用):
.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
, where 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…
}