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