Sassの覚えておきたい便利な書き方〜for関数編〜

こんにちは、デザイナーの瀬戸口です(・ω・)
fotowaチームにjoinしてまだ一年経ってない！？
......長いような短いような不思議な感覚です。

最近業務で「あまり使うことがなかったけど、まとめて書けるので設定プロパティ量が少なくなり扱えたら便利！」なSass関数を利用することがあったので、ご紹介していこうと思います。

そもそも、Sass関数とは？
で？for関数って何？
どんな風に使ったの？
まとめ

そもそも、Sass関数とは？

プログラミング言語ではおなじみの「関数」、ざっくりお伝えすると「〇〇なモノを△△するよ」という条件と実行内容をまとめたものです。
Sassには大きく分けて「組み込み関数」と「自作関数」の2種類が存在します。
どちらの関数でも単体で使用するというよりは、mixinなどと掛け合わせて使うことが多いかと思います。

組み込み関数（percentage($number) など）

Sassで準備されている関数で、条件と実行内容があらかじめ定義されています。

ex.)

.sample1 {
  width: percentage(0.5);
  // 「実行結果」
  // width: 50%;
}

設定プロパティ量を削減して記述できるものが多く設定されています。
より詳しく組み込み関数の種類を知りたい方は以下の公式ドキュメントをどうぞ！
https://sass-lang.com/documentation/functions

自作関数（@function）

名前の通りですが条件と実行内容を自分で作成します。作成するときには引数と返り値の設定が必要です。引数とは関数に受け渡す値のことで下記の例では($color)の部分、返り値とは実行結果として返される値のことで@return以降の部分です。

ex.)

@function hoverColor($color){
  @return lighten($color, 30%);
  // lightenは指定のカラーを明るくするための組み込み関数で、この場合は$colorを30%明るくするということになります。
}

.sample2{
  background-color: #000000;

  &:hover{
    background-color: hoverColor(#000000);
    // 「実行結果」
    // background-color: #4d4d4d;
  }
}

で？for関数って何？

先ほどご紹介した組み込み関数の一種で「ある設定値Xからある設定値Yまでの間、定義された処理を繰り返す」ために使う関数です。

ex.)

@for $i from 0 through 20 {
  .marginAll--#{$i * 5} {
    margin:#{$i * 5}px;
  }
  // 「実行結果」
  // .marginAll--5{
  //   margin: 5px;
  // }
  // .marginAll--10{
  //   margin: 10px;
  // }

  // 中略

  // .marginAll--100{
  //   margin: 100px;
  // }
}

補足説明をすると、上述の設定値Xと設定値Yはこの例で言えばそれぞれ「0」と「20」ということになり、$iは設定されたXからYまでの値を「1」ずつ増やしながら処理を行います。

どんな風に使ったの？

「fotowa」の「photobook紹介ページ」で使いました。
ギャラリーイメージ
（URL：https://fotowa.com/goods）

こちらの商品一覧のギャラリーはhtml/cssで作成しており、javascriptを使用していません。
そのため、for関数を利用することでプロパティ設定量が大幅に圧縮できました。

実際のコード

（for関数部分のみでプロパティは省略）

// @includeで定義された値を$nameと$itemsで取得する
@mixin galleryAnimation($name, $items) {

  // この場合1から$itemsまで中の処理を行う、$iは1から$itemsまで1ずつ増える
  @for $i from 1 through $items {

    // 変数をセレクターで使用するには以下のような書き方が必要。これをインターポレーション（「#{変数}」）と呼ぶ
    .#{$name}#{$i}:checked {

      & ~ .intro__gallery {

        .main {

          &__img {

            &--#{$i} {
              〜
            }
          }
        }

        .thumbnail {

          li:nth-child(#{$i}) {

            .image {
              〜
            }
          }
        }
      }
    }
  }
}
@include galleryAnimation(
  $name: α,
  $items: β
);

それぞれの商品でギャラリーの数を設定できる必要があったので、商品名とギャラリー数は変数で渡しています。もし関数未使用の状態で商品名が変わったり、商品数が増えたり、ギャラリーの数に変更があったら、最悪の場合は上記の部分を「商品数×ギャラリーの数」書かなくてはならない、読まなくてはならない、編集箇所を探さなくてはならない.......ゾッとしますね。

まとめ

いかがでしょうか？あまりプログラミング言語に触れる機会が少なく、関数と聞いて「うっ(・ω・；)」となる方もいらっしゃるかとは思いますが、利用していくとメンテナンスの時に幸せな気持ちになれるかもしれません。（わかりにくい部分にはコメントアウトも忘れずに）
また実務で何かSass関数を使用することがあればご紹介したいと思います。