5

方向と数を取る「関数」を持たせるために、このコードを（おそらくループで）減らす方法は？

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

2 に答える 2

4

問題ない：

.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

于 2015-02-14T10:05:59.510 に答える
-1

LESS ではこれを行うための言語構成要素がないため、これは不可能であるとほぼ確信しています (LESS を使用してからしばらく経っているので、間違っている可能性があります)。一方、Sass は、ループやリストのようなものがあるため、それを実行できる可能性があります (ただし、そこにあるオプションを見ると、可変数のシャドウを処理するのはかなり醜いように見えます)。

于 2012-09-24T12:45:00.503 に答える