東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【sass】指定のnth-childを繰り返し処理

パターン1

下記のsassで

@for $i from 0 through 3 {  
        .effect_ul li:nth-child(#{$i + 1}) {  
            margin-top:0;
        }  
} 


以下のcssが出力される

.effect_ul li:nth-child(1){
  margin-top;0;
}
.effect_ul li:nth-child(2){
  margin-top;0;
}
.effect_ul li:nth-child(3){
  margin-top;0;
}
.effect_ul li:nth-child(4){
  margin-top;0;
}

パターン2

@for $value from 1 through 5 {
  .c2_ul li:nth-child(#{$value}):before {
    content: '#{$value}';
    position:absolute;
    left:0;
    top: 0;
  }
}


以下のcssが出力される

.c2_ul li:nth-child(1):before {
    content: "1";
    position: absolute;
    left: 0;
    top: 0;
}

.c2_ul li:nth-child(2):before {
    content: "2";
    position: absolute;
    left: 0;
    top: 0;
}

.c2_ul li:nth-child(3):before {
    content: "3";
    position: absolute;
    left: 0;
    top: 0;
}

パターン3 transition-delay掛け算

@for $i from 0 through 4 {  
        .recruit_right li:nth-child(#{$i + 1}) {  
            @include transition-delay(0.15 * $i + s);
        }  
}