【SASS入門】for文の使い方と業務で使える3つの活用術

【SASS入門】for文の使い方と業務で使える3つの活用術

今回は、SASSを使う際に、どうやってfor文を活用すればいいのかを紹介します!

SASSでfor文が使えるのは分かるけど、使う機会がないな~

for文を使ってはいるけど、合ってるのかビミョー・・・

という方は必見です!

もし、

for文自体が分かんない!!

という場合は、
制御構文 で条件分岐や繰り返し処理を行う】の後半部分を見てもらえると理解が深まると思います!

手元にSASSをコンパイルできる環境がなければ、テスト用にウェブ上でSASSをサクッとコンパイルできる【Sass Meister】があるのでぜひ活用してみてください!
もし、本格的にSASSを始めたい方は【Node.jsを使ってSASSを始めよう!】を見れば簡単に始められると思います(^ω^)

とりあえず記述方法【前半戦】

// 配列
$sizes: 12px, 14px, 16px, 18px, 20px;

// 普通のfor文
@for $i from 1 through 5 {
  .text_#{nth($sizes, $i)} {
    font-size: nth($sizes, $i);
  }
}

// each文
@each $size in $sizes {
  .text_#{$size} {
    font-size: $size;
  }
}
// 出力結果
.text_12px {
  font-size: 12px;
}
.text_14px {
  font-size: 14px;
}
.text_16px {
  font-size: 16px;
}
~ 省略 ~

for文は基本的に@for@eachの2つがあります。
※厳密にいうとwhile文もあるけど、ほぼ使わないので割愛ww

この2つは、やっていること自体(出力結果)は同じです。
構文中の処理を繰り返しているだけですね。(ここでは、.textの定義)

じゃあ、特徴の違いは何なのかというと、

  • for文:指定された回数を繰り返す
  • each文:配列内の個数分だけ繰り返す

という感じですね。
あと、@eachの方が記述量が少ないのでスッキリします!

初心者のうちはどちらを使ってもOKです。
個人的には、スッキリ書ける使用頻度が高め@eachがオススメです!

@for@each使い分けれるようになると、メンテナンス性を爆上げ出来るようになります!!
使い分けるための考え方は、

  • for文:個数が決まっている場合数値($i)を使いたい場合
  • each文:個数が決まっていない場合連想配列を使いたい場合

こんな感じですね。
具体例は、この記事の後半にやっていきます!
なので、今は「ほ~ん(←よく分かってない」でOKです。

ちなみに、チラッと出した「連想配列を使いたい場合」ですが、@eachを使うことで、連想配列を使うことも出来ます。

// 連想配列
$sizes: (
  tiny: 12px,
  small: 14px,
  normal: 16px,
  big: 18px,
  huge: 20px
);

// 連想配列を使ったeach文
@each $key, $value in $sizes {
  .text_#{$key} {
    font-size: $value;
  }
}
// 出力結果
.text_tiny {
  font-size: 12px;
}
.text_small {
  font-size: 14px;
}
.text_normal {
  font-size: 16px;
}
~ 省略 ~

なんか、話の流れでついでのように紹介してしまったのですが、実はこれが一番重要だったりしますw
つまり、実際の業務では応用技である、連想配列を使ったeach文をよく使うって感じですね!

連想配列は結構、重要だったりします。
怪しいときは【Sassで連想配列が使えるようになってたので使ってみた。】で連想配列を解説しているので、そこでザックリと理解してから進んだ方が楽だと思います!

SASSのfor文はこうやって使う!【後半戦】

さて、後半戦に入っていきましょう!
後半戦では@for@eachの具体的な活用方法を紹介していきます!

紹介する内容は以下の通りです。

  • @forを使って汎用的に使えるマージンを作る
  • @eachと連想配列を使って色んなサイズのテキストを作る
  • @eachと連想配列を使って色んな色のボタンを作る

@forを使って汎用的に使えるマージンを作る

ウェブサイトを設計するときに、固定マージンを付与するクラスを作ることがあると思います。

こんな感じで、同じような記述を繰り返す場合にfor文が活躍しますね!
完成系は以下のようになります!

// スペースを定義
@for $i from 1 through 10 {
  $space: $i * 5;  // スペースを5の倍数にする

  // マージン
  .mt_#{$space} {
    margin-top: $space !important;
  }
  .mb_#{$space} {
    margin-bottom: $space !important;
  }
  .my_#{$space} {
    margin-top: $space !important;
    margin-bottom: $space !important;
  }
  // パディング
  .pt_#{$space} {
    padding-top: $space !important;
  }
  .pb_#{$space} {
    padding-bottom: $space !important;
  }
  .py_#{$space} {
    padding-top: $space !important;
    padding-bottom: $space !important;
  }
}

具体的に解説しますね!

@for $i from 1 through 10

1~10を繰り返し処理しています。
もし、バリエーションを増やしたい場合は「10」の部分を増やしてみてください。

$space: $i * 5;

スペースの値を5の倍数になるようにしています。
仮に「3, 6, 9, …」のように3の倍数にしたい場合は「3」にします。

.mt_#{$space}

#{変数}で変数を展開できます。
出力結果は.mt_5.mt_10.mt_15のようになります。

@eachと連想配列を使って色んなサイズのテキストを作る

ここからは、@eachと連想配列を使った実用例を紹介していきます。

まずは、クラス1つでサイズ変更できるコンポーネントになります!
出力後のイメージとしては、こんな感じですね。

フォントサイズ変えたいけど、クラス作るまでもないんだよな~

ってときに、とても便利です。
完成系はこんな感じになります。

// サイズの定義
$sizes: (
  tiny: 12px,
  small: 14px,
  normal: 16px,
  large: 18px
);

.text {
  line-height: 1.6;
}
@each $key, $value in $sizes {
  .text.#{$key} {
    font-size: $value;
  }
}

では、具体的に解説していきます。

// サイズの定義
$sizes: (
  tiny: 12px,
  small: 14px,
  normal: 16px,
  large: 18px
);

ここでは、サイズを連想配列で定義してあげています。

@each $key, $value in $sizes

ここでは、連想配列の中身の数だけ繰り返し処理をさせます。
@each文では、連想配列のKey値とValue値を取得しながら繰り返し処理することが出来ます。
例えば、tiny: 12pxの場合だと、「tiny」がKey値「12px」がValue値になります。

.text.#{$key} {
  font-size: $value;
}

ここで実際にスタイルを記述しています。



ここで仮に、新しく「huge」というクラスを追加したい場合は、$sizesにKey値とValue値を追加するだけでOKです!

// サイズの定義
$sizes: (
  tiny: 12px,
  small: 14px,
  normal: 16px,
  large: 18px,
  huge: 28px
);

他にも、スタイルを減らしたい場合フォントサイズを変えたい場合は、連想配列を修正すればOKです!
連想配列を使うことでコンポーネントの修正がかなり楽になります!

@eachと連想配列を使って色んな色のボタンを作る

最後は、応用編ということで様々な色のボタンを量産してみたいと思います。

サイトによっては、様々な見た目のボタンを使い分けることもあると思います。
今回は、【背景色違い】【文字色違い】【ボーダーの有無】に着目して、繰り返し処理を回してみます!

// ボタンのスタイル一覧
$button_themes: (
  gray: (
    bg_color: #aaa,
    txt_color: #fff,
    border_color: #aaa,
  ),
  red: (
    bg_color: #e83149,
    txt_color: #fff,
    border_color: #e83149,
  ),
  outline_red: (
    bg_color: transparent,
    txt_color: #e83149,
    border_color: #e83149,
  )
);

// ボタンの定義
.button {
  padding: 5px 10px;
  font-size: 16px;
}
@each $key, $value in $button_themes {
  .button.#{$key} {
    backgroung-color: map-get($value, 'bg_color');
    color: map-get($value, 'txt_color');
    border-color: map-get($value, 'border_color');
  }
}

う~ん、応用とあって結構、複雑ですね・・・。
もちろん、解説していきます!!

// ボタンのスタイル一覧
$button_themes: (
  gray: (
    bg_color: #aaa,
    txt_color: #fff,
    border_color: #aaa,
  ),
  red: (
    bg_color: #e83149,
    txt_color: #fff,
    border_color: #e83149,
  ),
  outline_red: (
    bg_color: transparent,
    txt_color: #e83149,
    border_color: #e83149,
  )
);

ここでは、ボタンのスタイルの定義をしています。
連想配列は入れ子にすることが出来ます。
Value値の中身を連想配列にすればOKです!

@each $key, $value in $button_themes

each文では、$button_themsの中のテーマを回していきます。
Key値の中には、各テーマの名前(gray, red, …)が入ります。
Value値の中には、各テーマの連想配列(txt_color, bg_color, border_color)が入ります。

.button.#{$key} {
  backgroung-color: map-get($value, 'bg_color');
  color: map-get($value, 'txt_color');
  border-color: map-get($value, 'border_color');;
}

最後は、スタイルの記述部分ですね。

注目すべき点は、map-get($value, 'bg_color')ですかね?
map-getは連想配列内の値を取得することが出来ます。
これを使うことで、 txt_color や bg_color のValue値を取得することが出来ます。

これをCSSに変換すると、こんな感じになります!

.button {
  padding: 5px 10px;
  font-size: 16px;
}
.button.gray {
  backgroung-color: #aaa;
  color: #fff;
  border-color: #aaa;
}
.button.red {
  backgroung-color: #e83149;
  color: #fff;
  border-color: #e83149;
}
.button.outline_red {
  backgroung-color: transparent;
  color: #e83149;
  border-color: #e83149;
}
.button.blue {
  backgroung-color: #3153e8;
  color: #fff;
  border-color: #3153e8;
}




というわけで、今回はSASSで使えるfor文とeach文の使い方と実務の設計で使える活用方法を紹介しました!

紹介したのは、ほんの一部だと思います。
for文を使えばアイディア次第で、もっと良い設計が出来ると思います!
そう考えると、ワクワクしてきますね♪

最後までありがとうございました!