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

@for : 繰り返し処理

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

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

@for $変数 form 開始値 through 終了値{
	//繰り返し処理
}

@forを使用した参考例

Sass
@for $i from 0 through 10{
	$start: 10;
	.font#{$i}{
		font-size: $start + $i + px;
	}
}
CSS – コンパイル後
.font0 {
	font-size: 10px;
}

.font1 {
	font-size: 11px;
}

.font2 {
	font-size: 12px;
}

.font3 {
	font-size: 13px;
}

.font4 {
	font-size: 14px;
}

.font5 {
	font-size: 15px;
}

.font6 {
	font-size: 16px;
}

.font7 {
	font-size: 17px;
}

.font8 {
	font-size: 18px;
}

.font9 {
	font-size: 19px;
}

.font10 {
	font-size: 20px;
}