今回のテーマは
✨Sassでリストのアイコンを一気に指定する方法✨
なんのこっちゃと思われた方はこちらをご覧ください
こちらのピンクの枠で囲ったアイコン。
一個ずつCSSで指定すると似たような処理を複数回書く必要があります......😩
ちょっと面倒くさいですよね〜
そんな時、Sassを使用した便利な実装方法があるので紹介したいと思います！
個々で画像を指定するよりも行数がグッと減るはず 😎
ソース
HTML
list.html
<ul>
<li class="list-item mod-first">アイテム1</li>
<li class="list-item mod-second">アイテム2</li>
<li class="list-item mod-third">アイテム3</li>
<li class="list-item mod-fourth">アイテム4</li>
<li class="list-item mod-fifth">アイテム5</li>
</ul>
```
- 【.mod-】クラスは[trelloのスタイルガイドにあるmodifier用のクラス命名](https://gist.github.com/bobbygrace/9e961e8982f42eb91b80#modifiers)です。
- 今回はサンプルなので名前を数字みたいなものにしていますが、実際クラス名をつける際は、見て直ぐ意味がわかるものが望ましいです。
Sass
```sass:list.sass
.list-item
&:before
// 共通スタイルをここに
content: ''
display: block
width: 50px
height: 50px
background: no-repeat center/contain
$items: first, second, third, fourth, fifth
@each $item in $items
&.mod-#{$item}:before
// 個々の画像を指定
background-image: url(PATH/TO/IMAGE/icon-#{$item}.svg)
```
- ぱっと見Sassのインデントが深いですが、出力されるCSSの詳細度には影響しません😊
- アイコンは基本的には疑似要素に入れるようにしています。(経験則なんですが、下手にクラスに混ぜるとpaddingとかいじらないといけなくて、(2行とかになった時に)崩れやすくなってしまいます)
## 説明
SassがCSSの拡張言語だというのは皆様御存知かと思うのですが、
その中の魅力として、
- 変数
- if文
- each文
- for文
- クラス名の継承
などなどあります。
今回は、上記にあげた中で
- **変数**
- **each文**
を使用しています。
### 変数
これはエンジニアの方ならもう手慣れたものですね😏
以下が変数にあたります。
```sass
$items: first, second, third, fourth, fifth
```
Sassの変数名でよく見かけるのはカラーコードの設定だと思いますが、
今回はループを回すための配列として使用しています。
因みに文字列の中で変数展開をするときは、
```sass
# {$item}
```
こう書きます。
### each文
配列内のすべての要素に対して処理をする為の関数です。
下記のように書きます。
```sass
@each $item in $items
```
参考 : [https://sass-lang.com/documentation/at-rules/control/each](https://sass-lang.com/documentation/at-rules/control/each)
今回はこのeach文を使用して、それぞれのリストに別々の画像を表示させる処理を書いています。
## 注意点
1. 画像ファイル名とクラス名は揃える必要があります。
2. アイコンの画像サイズがバラバラで個々にbackground-sizeを当てないといけないという方は、CSSで解決しようとせずに、すべてのアイコンを同じサイズでトリミング、エクスポートして使いましょう。以下の利点が見込めます✨
- 端末幅の変更による事故等が起こらない
- 無駄にマジックナンバーをCSS内に入れずに済む
- 画像を変える度にCSSのbackground-sizeを測り直す必要がなくなる
以上です！
Have a nice **Sass** life 😘