如何减少此代码(可能带有循环?),以获得具有方向和数量的“功能”?
@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
, where se
= 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…
}