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