SCSSの @for ループ（ループ文）

@forループ：

方法1： @for $i from {開始値} through {終了値}
方法2： @for $i from {開始値} to {終了値}

注意： through は終了値を 含み ますが、to は終了値を 含みません。

使い方の例：

SCSSコード：

@for $i from 1 through 3{
    .z#{$i}
    {
        transform: rotate(30deg * $i);
    }
}

コンパイルされたCSSは以下のとおりです：

.z1 {
    transform: rotate(30deg)
}

.z2 {
    transform: rotate(60deg)
}

.z3 {
    transform: rotate(90deg)
}