Sassの書き方（ループ）

Sassでのループ（繰り返し）処理について

Sassにはループ処理をするための仕組みとして、@for、 @while、@eachの3種類が用意されています。
それぞれのループの基本的な書き方は以下の通りです。

style.scss

// @for （指定した回数のループを実行）

@for $i from 1 through 3 {

	.content#{$i}{
		margin-bottom: 40px;
		padding: 40px;
		width: 100%;
		box-sizing: border-box;
	}
}


// @while　（条件式を満たす限りループを実行）

$i:0;
$flag: false;

@while $i < 3 {

	$marginBottom: $i * 5;

	.mbg#{$marginBottom}{
		margin-bottom: #{$marginBottom}px;
	}

	$i: $i + 1;
}


// @each　（Lists、Mapsの要素の数だけループを実行）

$list1: [ 'top', 'about', 'news', 'contact'];

@each $v in $list1 {

	##{$v} {
		display: flex;
		margin-bottom: 40px;
	}
}

それぞれのループについて、1つずつ解説していきます。

@for 指定した回数のループを実行する

@forはfromからthrough、またはtoの値まで処理を繰り返します。

through（n以下）

throughは「以下」の指定になり、「from 1 through 3であれば「1から3以下まで」の指定になります。

style.scss

@for $i from 1 through 3 {

	.content#{$i}{
		margin-bottom: 40px;
		padding: 40px;
		width: 100%;
		box-sizing: border-box;
	}
}

style.css

.content1 {
  margin-bottom: 40px;
  padding: 40px;
  width: 100%;
  box-sizing: border-box;
}

.content2 {
  margin-bottom: 40px;
  padding: 40px;
  width: 100%;
  box-sizing: border-box;
}

.content3 {
  margin-bottom: 40px;
  padding: 40px;
  width: 100%;
  box-sizing: border-box;
}

to（n未満）

toは「未満」の指定になり、「from 1 to 3であれば「1から3未満まで」の指定になります。

style.scss

@for $i from 1 to 3 {

	.content#{$i}{
		margin-bottom: 40px;
		padding: 40px;
		width: 100%;
		box-sizing: border-box;
	}
}

style.css

.content1 {
  margin-bottom: 40px;
  padding: 40px;
  width: 100%;
  box-sizing: border-box;
}

.content2 {
  margin-bottom: 40px;
  padding: 40px;
  width: 100%;
  box-sizing: border-box;
}

from （負の値）

fromの開始する数値は負の値も指定できます。
例えば「from -2 to 3」とすると-2、-1、0、1、2とカウントされながらループを実行します。

style.scss

@for $i from -2 to 3 {

	$left: $i * 5;

	.left#{$left}{
		left: #{$left}px;
	}
}

style.css

.left-10 {
  left: -10px;
}

.left-5 {
  left: -5px;
}

.left0 {
  left: 0px;
}

.left5 {
  left: 5px;
}

.left10 {
  left: 10px;
}

@while 条件式を満たす限りループを実行する

@whileは指定した条件式がtrueになる限り、ループを実行します。
@forのように自動的に変数の値を更新する仕組みはないため、@whileの条件式がいずれ終了するように変数の値を更新します。

以下の例では変数$iに数値を設定し、@whileの中で1を足しながら値が3未満の間はループを実行します。

style.scss

// 変数の設定
$i:0;

@while $i < 3 {

	$marginBottom: $i * 5;

	.mbg#{$marginBottom}{
		margin-bottom: #{$marginBottom}px;
	}

	$i: $i + 1;
}

style.css

.mbg0 {
  margin-bottom: 0px;
}

.mbg5 {
  margin-bottom: 5px;
}

.mbg10 {
  margin-bottom: 10px;
}

複数の条件式を指定する

@whileの条件式は論理値で繋いで複数組み合わせることもできます。
以下の例は「変数$iが3未満のとき」かつ「変数$flagがtrue」と2つの条件式を組み合わせています。

style.scss

// 変数の設定
$i:0;
$flag: true;

@while $i < 3 and $flag {

	$marginBottom: $i * 5;

	.mbg#{$marginBottom}{
		margin-bottom: #{$marginBottom}px;
	}

	$i: $i + 1;
}

style.css

.mbg0 {
  margin-bottom: 0px;
}

.mbg5 {
  margin-bottom: 5px;
}

.mbg10 {
  margin-bottom: 10px;
}

@each 条件式を満たす限りループを実行する

@eachはLists（配列）、またはMapsの要素の数だけループ処理を実行します。

以下の例では変数$list1に入っている値の数だけループを実行してCSSを出力します。

style.scss

$list1: [ 'top', 'about', 'news', 'contact'];

@each $v in $list1 {

	##{$v} {
		display: flex;
		margin-bottom: 40px;
	}
}

style.css

#top {
  display: flex;
  margin-bottom: 40px;
}

#about {
  display: flex;
  margin-bottom: 40px;
}

#news {
  display: flex;
  margin-bottom: 40px;
}

#contact {
  display: flex;
  margin-bottom: 40px;
}

多次元のListsを扱う

@eachは入れ子にすることで、2次元以上の多次元になっているListsも扱うことができます。

style.scss

// 変数の設定
$list2: [
	['top','top_content1','top_content2'],
	['about','about_content1','about_content2']
];

@each $v in $list2 {

	@each $selector in $v {
		.#{$selector} {
			display: flex;
		}
	}
}

style.css

.mbg0 {
  margin-bottom: 0px;
}

.mbg5 {
  margin-bottom: 5px;
}

.mbg10 {
  margin-bottom: 10px;
}

Mapsを扱う

@eachでMapsから値を受け取るときは、キーと値に対応する変数を2つ用意します。
以下の例では変数$content_css_setに入っているCSSプロパティと値の組み合わせを@eachで1つずつ取り出して出力します。

style.scss

// 変数の設定
$content_css_set: ( "display": "flex", "flex-wrap": "wrap", "width": "100%");

.content {
	@each $property, $value in $content_css_set {

		#{$property}: #{$value};
	}
}

style.css

.content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。