0

LESSで正規表現を使用する方法はありますか？これが私のコードです：

css：

@color: red;

body{color:@color;}/*Text is red if LESS is loaded correctly */

span{display:inline-block;position:relative;top:2px;}

.char1{.titel-animation(0s);}
.char2{.titel-animation(0.2s);}
.char3{.titel-animation(0.4s);}
.char4{.titel-animation(0.6s);}
.char5{.titel-animation(0.8s);}
.char6{.titel-animation(1s);}

.titel-animation(@delay){
    animation: sitetitel 1s @delay ease 1; 
    -moz-animation: sitetitel 1s @delay ease 1; 
    -webkit-animation: sitetitel 1s @delay ease 1;
}

@keyframes sitetitel {
    50%{ 
        color:blue;
    }
}
@-moz-keyframes sitetitel {
    50%{ 
        color:blue;
    }
}
@-webkit-keyframes sitetitel {
    50%{ 
        color:blue;
    }
}​

HTML：

<span class="char1">F</span>
<span class="char2">o</span>
<span class="char3">o</span>
<span class="char4">b</span>
<span class="char5">a</span>
<span class="char6">r</span>

デモ： http：
//jsfiddle.net/kaEGh/

私が欲しいのは交換することです

.char1{.titel-animation(0s);}
.char2{.titel-animation(0.2s);}
.char3{.titel-animation(0.4s);}
.char4{.titel-animation(0.6s);}
.char5{.titel-animation(0.8s);}
.char6{.titel-animation(1s);}

このように何かすることによって：

.char@number{.titel-animation(((@number-1) *0.2)s);}

それが可能なら

4

1 に答える 1

2

正規表現ではありませんが、ガードを使用して再帰を取得できます。以下はあなたが求めていることをしていると思います。

.charX(@number) when (@number > 0) {
  (~".char@{number}") {
    @adjustedNumber: (@number - 1) *0.2;
    @unitNumber: ~"@{adjustedNumber}s";
    .titel-animation(@unitNumber)
  }
  .charX(@number - 1);
}

.charX(@number) when (@number = 0) {
} 

.charX(6);
于 2012-06-24T11:17:14.740 に答える