吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

@each : 繰り返し処理

2014年3月1日 / category : reference-sass, sass

繰り返し処理を実行する@eachの使い方の紹介です。構文は下記の通りです。

@each 変数 in 配列変数{
	//繰り返し処理
}

@eachを使用した参考例

Sass
$classList: classA, classB, classC, classD;

@each $class in $classList{
	.box-#{$class}{
		width: 100%;
	}
}
CSS – コンパイル後
.box-classA {
	width: 100%;
}

.box-classB {
	width: 100%;
}

.box-classC {
	width: 100%;
}

.box-classD {
	width: 100%;
}