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

@while : 繰り返し処理

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

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

@while 条件{
	//繰り返し処理
}

@whileを使用した参考例

Sass
$num: 0;
$start: 10;

@while $num < 10{

	.font#{$num}{
		font-size: $start + $num + px;
	}

	$num: $num + 1;

}
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;
}