SCSSのループ

概要

scssでは、cssでは使用できないfor文やwhile文を使用することができる。
ループを使用することによって、例えば複数の連番のクラスを記述する際により少ない記述量で書くことができる。

使用方法

for

使用する場合には以下のように記述する。

@for 変数名 from 始値 through 終値 {
	...
}

具体例としては、

@for i from 1 through 10{
		...
}

となる。
このコードでは1-10の値をiに格納してループする。

この中にクラスを記述することもできる。

@for i from 1 through 10{
	.num-#{$i}{
		...
	}
}

while

使用する場合には以下のように記述する。

@while 条件式 {
	...
}

具体例としては、

$height: 10;
@while $height < 50 {
  .space-#{$height} {
    margin-top: $height + px;
  }
  $height: $height + 10;
}

each

SCSSの変数でリスト型や辞書型に対してeachを使用することができる。

$list: 1, 2, 3
 
@each $x in $list {
	.#{$x}-clas{
		...
	}
}