ASHIRIのふろんとあれ、なんだっけぇ
なんだっけぇ一覧
HTML/CSS
【Sass】＠forを使ってアイコンを繰り返し表示する

【Sass】＠forを使ってアイコンを繰り返し表示する

2024年01月26

CATEGORY : HTML/CSS

TAGS :

今回は、コーディングの記述の簡略化・効率的にする事ができるSassより、一個ずつデザインの違うアイコンの繰り返し部分に対して通常のコーディングであれば、似たようなコーディングを複数回記述する必要がある処理を、Sassを使用して簡素化する、便利な実装方法を紹介させていただきます。

@for(フォー)とは？

@for(フォー)は、繰り返しの命令文で、@forを使うことで指定した開始数値から終了数値まで、
1ずつ増えながら処理を繰り返す命令文です。また、@forの構文には2つの利用方法があります。

指定した数値を含む through 構文

through構文は、指定した数値を含んだ繰り返し処理を実行します。


@for $value from 1 through 3 {
  .sample_#{$value}{
    margin-bottom:1px * $value;
  }
}

コンパイル後


.sample_1{
  margin-bottom:1px;
}
.sample_2{
  margin-bottom:2px;
}
.sample_3{
  margin-bottom:3px;
}

指定した数値を含まない to 構文

to構文は、指定した数値を含まずに繰り返し処理を実行します。


@for $value from 1 to 3 {
    .sample_#{$value}{
      margin-bottom:1px * $value;
    }
}

コンパイル後


.sample_1{
  margin-bottom:1px;
}
.sample_2{
  margin-bottom:2px;
}

利用箇所のマークアップ状況や処理方法により、どちらを使用するかはかわるかと思いますが、through構文の方が、開始数値から終了数値以下を繰り返すので、直感的でわかりやすいかと思います。

＠forを使ってアイコンを繰り返し表示

それでは、実装方法を紹介させていただきます。

画像の準備

例として、下記のようなリストタイプのデザインをコーディングする場合、通常のCSSであれば、
それぞれのタグに画像を指定する事でコーディング対応はまったく可能ですが、少々行数が増えて
めんどいですね。

@forで繰り返し処理をするにあたり、書き出すルールとして、画像ファイル名は同じにして
画像ファイル名の最後に数字で連番化します。

これで画像の準備は完了です。

マークアップ

それではマークアップをしていきます。例えば先ほどのデザインをマークアップすると以下のようになります。


<ol>
  <li><p>音楽</p></li>
  <li><p>お気に入り</p></li>
  <li><p>写真・素材</p></li>
  <li><p>ソーシャル</p></li>
  <li><p>お友だち</p></li>
  <li><p>タグ一覧</p></li>
</ol>

これでマークアップは完了です。

Sassコーディング

それではコーディングをしていきます。アイコンは疑似要素に入れちゃいます。


ol{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & li{
    width: 30%;
    margin-bottom: 4.5rem;
    display: flex;
    align-items: center;
    @for $i from 1 through 6 {
        &:nth-child(#{$i}) {
            &::before {
                content: '';
                display: inline-block;
                width: 5rem;
                height: 5rem;
                background: url("../images/list-icon0#{$i}.png") top left no-repeat;
                background-size: contain;
            }
        }
     }
     & p{
       display: flex;
       align-items: center;
     }
  }
}

これでSassコーディングは完了です。

for文の変数{$i}に、ループ処理が連番で入るので、この処理を利用して、連番付けをした画像ファイル名と同じになるよう、疑似要素で読み込ませているファイル名に、{$i}を利用し、background処理にて読み込ませます。
これでコーディングは完了、各画像を各リストにコーディングするより、グッと行数も減り、簡略化できたかと思います。