2012-06-24 4 views
0

정규 표현식을 덜 사용하는 방법이 있습니까?정규 표현식을 덜 사용하십시오

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);} 
,536 이 같은가 someting으로 91,363,210

:

[email protected]{.titel-animation(((@number-1) *0.2)s);} 

답변

2

하지 정규 표현식 가능하지만, 당신은 재귀를 얻기 위해 가드를 사용할 수 있는지. 내 생각에 당신이 묻고있는 것이 아래에 있다고 생각합니다 ....

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

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

.charX(6); 
관련 문제