如何简化这个LESS CSS Box-shadow mixin? (带有“方向”的多个阴影)

时间:2012-09-23 23:03:25

标签: css less less-mixins

如何减少这段代码(可能是一个循环?),有一个“功能”,它需要方向和数字?

  • @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…
}

2 个答案:

答案 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;

文档:

http://lesscss.org/features/#loops-feature

http://lesscss.org/features/#merge-feature

答案 1 :(得分:-1)

我几乎肯定这是不可能的,因为它没有语言结构这样做(因为我使用LESS已经有一段时间了,所以我可能错了)。另一方面,Sass可能能够做到这一点,因为它确实有循环和列表之类的东西(虽然看那里的选项,看起来处理可变数量的阴影可能非常难看。)