sass：作为变量的类名称

Question

<ul> 
    <li class="delay1"> 

    </li> 
    <li class="delay2"> 

    </li> 
    <li class="delay3"> 

    </li> 
    <li class="delay4"> 

    </li> 
    <li class="delay5"> 

    </li> 
</ul> 

<script> 
    for (i=1;i<6;i++){ 
    $('li.delay'+i).css('transition-delay',100*i+'ms'); 
    } 
</script> 

如何使用sass和无javascript或者不必编写5行CSS来执行相同的操作？

我已通读learn sass页面，但我甚至不知道这个机制是什么。它看起来不像mixin。

Answer 1

使用the for control directive与interpolation

@for $i from 1 through 3 { 
    .item-#{$i} { width: 2em * $i; } 
} 

Answer 2

这应该做你想要

@for $i from 1 through 6 { 
    li.delay#{$i} { 
     transition-delay: 100*$i; 
    } 
}