murketでのSassの変数・@mixinのご紹介

Advent Calendar 2021, CSS, Sass

この記事はレコチョク Advent Calendar 2021の2日目の記事となります。

前書き

はじめまして!
好きなものはみかんゼリーとアイドル、嫌いなものはマンゴーゼリーと掃除機の音、おおくぼです。

普段はレコチョクで各サービスのウェブ画面を作るお仕事をしています。
直近は10月に始まったmurket(ミューケット)を作っています。
【隙あらば宣伝】murketについてはこちら → https://recochoku.jp/corporate/murket/

今回はそのmurket開発での個人的こだわりポイントとして、Sassの変数や@mixinについてお話できればと思います。

簡単にはなりますが変数や@mixinの定義の参考になれば幸いです。

前提

前書きにも一部出てきましたが、murketではCSSを書く際にSass(SCSS記法)を使用しています。
Sassの公式サイト → https://sass-lang.com/

SASS記法ではネストを使用し以下のように書きます。

それに対しSCSS記法ではよりCSSに寄せた書き方で、 {}; を使用し以下のように書きます。

今回の記事では後者の書き方になりますのでご承知おきください。

本題 – 変数編

Sassの変数って?

Sassでは↓のように値を変数として持つことができ

CSSにすると↓のようになる

というものです。
サイト全体で統一したい値は変数にしてあげると変更にも柔軟に対応できて楽です。
公式サイトの説明はこちら → https://sass-lang.com/documentation/variables

murketでは何を変数にしてたの?

大きく以下4つを変数化していました。

  • 余白
  • フォントサイズ
  • レスポンシブデザイン用のブレイクポイント

どれもmurket内で共通使用するとサイトの統一感も取れていい感じになります。

具体的な変数の定義方法は?

余白やフォントサイズ、ブレイクポイントは変数にそのまま値を定義して完了。
何を意図する値か分かるように余白には margin-、フォントサイズには font- 、ブレイクポイント(画面幅)には width- とプレフィックスを付けています。
その上で、余白とフォントサイズに関しては数種類あるのでそれぞれ -small -medium -large みたいな風に名付けてました。

残った色の定義方法について。
murket内のSass管理方法で結構悩んだのがこれでした。

というのも、murketでは多種多様なグレーが使われています。
実際全部書き出すとこんな感じ。

つまり、余白と同じテンションで命名すると

みたいな感じになってしまいます。

結構命名自体にも悩んでしまいますし、実際に変数を使うときに「あれ、light-medium-grayとdark-white-medium-grayってどっちの方が白いんだっけ??」にかなりの確率で陥るわけです。

あと単純に変数名を覚えられない。

という訳でmurketでは色をHSVに変換したV(明度)の値を用いて $color-gray-[Vの値] で命名しています。
さっきの色たちはこんな感じで命名することができます。

これで新しく色が増えても命名に困らず、どっちが白いかも悩まず、変数名も最後の番号なんだっけ?くらいの思い出しでOKです。

ちなみに、murketではより分かりやすくするため以下のように用途に合わせた変数を再定義しているものもあります。

本題 – @mixin編

@mixin(ミックスイン)って?

先程の変数は値を入れるものでしたが@mixinはスタイルを使い回すために役に立つものです。
Sassでは↓のように頭に @mixin を付けて定義、頭に @include を付けて使用することができ

CSSにすると↓のようになる

というものです。
@mixinは引数を持つことができるので↓のようにすることもできます。

CSSにした結果は先程と同じなので割愛。

変数同様にサイトで統一したいものだったりとかこうしたい時は大体書くこと決まってるよねということがあったりする場合に便利です。
公式サイトの説明はこちら → https://sass-lang.com/documentation/at-rules/mixin

murketでは何を@mixinにしてたの?

大きく以下4つを@mixin化していました。

  • テキスト
  • SVGで作られるアイコンの設定
  • z-index
  • position: absoluteでの中央揃え

全部書くと長くなってしまうので、今回は「サイトで統一したいもの」の例としてz-indexについて、「こうしたい時は大体書くこと決まってるよね」の例としてabsoluteについて詳細を書きます。

具体的な@mixinの定義方法は?

まずはz-indexについて。
murketでは何が何の上にあるのかが分からなくならないようにz-indexの値を@mixinで管理していました。

これにより「あれ、モーダルを出したのにヘッダーの後ろに回っちゃったよ!?」というバグの発生が少なく&発見が早くなりましたし、各スタイル宣言場所で確認しなきゃいけなかったz-indexの値も@mixinでパッと見て分かるようになりました。

最後にabsoluteについて。
positionをabsoluteにして中央に設置したい時などは書くことが大体決まっているので@mixinにしてしまいます。

これにより決まりきったものを書く手間が若干省け、書き間違いなどのリスクも減少しました。

後書き

簡単ですがmurketで使っているSassの変数や@mixinを一部紹介しました。
個人的には開発着手時に何をどのように定義すればやりやすいかな??と悩むことが多かったので、一案としてお役に立てればなと思います!

明日のレコチョク Advent Calendarは3日目「えを描こう」です。お楽しみに!