如何减少这段代码(可能使用循环?),以获得一个带有“方向”和“次数”的“函数”?
@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
代表南东方向。同样的,也可以使用North West、North East、South West和South East。
如何避免这种情况…?
.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…
}