Sassの変数・@mixinのご紹介～murket～
今回はレコチョク開発担当、ウェブ画面を作っている担当者本人から聞いた、レコチョクのECソリューション「murket」でのこだわりポイントを紹介🌟
わたしが何故急に技術系の記事を？というと、、、
音楽×ITのサービス企画や他社への提案を行うためには、実際の開発はできなくても、理解して説明出来る状態になっていなきゃいけないなと思い日々勉強をしていてるからです📚
この記事は、IT系サービスの開発担当者が「何をどのように定義すればやりやすいかな？？」と悩んだ時の一案として
それから、専門用語は出来るだけ補足や説明を入れるようにしているので、私と同じようなIT系サービスの企画や営業担当の方が、システム側がどんなことを考えて開発をしてくれているか理解のきっかけに読んでもらえると嬉しいです👍
そもそも「murket」って何？という方はこちらをどうぞ↓↓
★今日の記事の中の人
おおくぼさん＠レコチョクシステム開発グループ
はじめまして！
好きなものはみかんゼリーとアイドル、嫌いなものはマンゴーゼリーと掃除機の音、おおくぼです。普段はレコチョクで各サービスのウェブ画面を作るお仕事をしています。今回はそのmurket開発での個人的こだわりポイントとして、Sassの変数や@mixinについてお話できればと思います。
簡単にはなりますが変数や@mixinの定義の参考になれば幸いです。
本編に入る前に：前提
★「CSS」とは？
Webページのレイアウトやデザインを整えるための言語です。
HTMLで記述された文章に対して、体裁やデザインを指定するために使用されるものです。
★「Sass（サス）」とは？
「murket」ではCSSを書く際に「Sass」を利用しています。
「Sass」とはCSSに対して機能を拡張した言語で、CSSをより書きやすく、見やすくしたスタイルシートのことです。
★「Sass」の書き方
さらに「Sass」にはSASS記法とSCSS記法があります。
今回はSCSS記法を使用しています。
※補足：SASS記法とSCSS記法の違い
★SASS記法
ネストを使用し以下のように書きます。
.selector
color: #ff0000★SCSS記法（今回はこちら）
よりCSSに寄せた書き方で、 { や } 、 ; を使用し以下のように書きます。
.selector {
color: #ff0000;
}では、本編に入ります！
Sassの変数って？
Sassでは↓のように値を変数として持つことができ
// 変数の定義
$red: #ff0000;
// 変数の使用
.selector {
color: $red;
}CSSにすると↓のようになる
.selector {
color: #ff0000;
}というものです。
サイト全体で統一したい値は変数にしてあげると変更にも柔軟に対応できてとってもラクなんです。（公式サイトの説明はこちら)
「murket」では何を変数にしてたの？
大きく以下4つを変数化していました。
①余白
②フォントサイズ
③レスポンシブデザイン用のブレイクポイント(画面幅)
④色
どれも「murket」内で共通使用するとサイトの統一感も取れていい感じになります。
具体的な変数の定義方法は？
①余白
②フォントサイズ
③レスポンシブデザイン用のブレイクポイント(画面幅)
この辺りは変数にそのまま値を定義して完了。
何を意図する値か分かるように
①余白には margin-、
②フォントサイズには font- 、
③ブレイクポイント(画面幅)には width-
とプレフィックス（先頭に付加して特定の意味を付け加える接辞）
を付けています。
その上で、①余白と②フォントサイズに関しては数種類あるので、それぞれ
-small
-medium
-large
みたいな風に名付けていました。（こんな感じ）
// 余白
$margin-large: 24px;
$margin-medium: 16px;
$margin-small: 8px;
// フォントサイズ
$font-large: 18px;
$font-medium: 16px;
$font-small: 14px;
// PCの最小画面幅(ここからPCビュー)
$width-for-pc: 960px;④色
残った色の定義方法について。
「murket」内のSass管理方法で結構悩んだのがこれでした。
というのも、murketでは多種多様なグレー（色）が使われています。
実際全部書き出すとこんな感じ。
#222222 /* 基本的な文字色 */
#2c2c2c /* 特定の部分の文字色 */
#505050 /* 基本的なアイコン色 */
#707070 /* 特定の部分のボーダー色 */
#888888 /* 明るめのアイコン色 */
#a0a0a0 /* 特定の部分のアイコン色 */
#aaaaaa /* 特定の部分のボーダー色 */
#d0d0d0 /* 基本的なdisabled色 */
#e0e0e0 /* ヘッダーのアイコン色 */
#f0f0f0 /* 基本的なボーダー色 */
#f4f4f4 /* 特定のボタン背景色 */これを①余白と同じテンションで命名すると
$color-black: #222222; // ←一旦この中で一番黒いからblack
$color-light-black: #2c2c2c; // ←blackよりは白いからlightとかにしとくかあ...
$color-dark-black-medium-gray: #505050; // ←black-medium-grayよりは黒いから、頭にdarkとか付けとく？
$color-black-medium-gray: #707070; // ←blackとmediumの間だからmudium-black？
$color-dark-medium-gray: #888888; // ←ここはmediumより黒いからdark-mediumでしょ！
$color-medium-gray: #a0a0a0; // ←真ん中だからmediumとか付けとく？
$color-light-medium-gray: #aaaaaa; // ←ここはmediumより白いからlight-mediumでしょ！
$color-dark-white-medium-gray: #d0d0d0; // ←white-medium-grayよりは黒いから、頭にdarkとか付けとく？
$color-white-medium-gray: #e0e0e0; // ←whiteとmediumの間だからmedium-white？
$color-dark-white: #f0f0f0; // ←whiteよりは黒いからdarkとかにしとくかあ...
$color-white: #f4f4f4; // ←一旦この中で一番白いからwhiteみたいな感じになってしまいます。
命名自体にも悩んでしまいますし、実際に変数を使うときに
「あれ、light-medium-grayとdark-white-medium-grayってどっちの方が白いんだっけ??」
という状況にかなりの確率で陥るわけです。
あと単純に変数名を覚えられない。
という訳で「murket」では色をHSVに変換したV(明度)の値を用いて
$color-gray-[Vの値]
で命名しています。
さっきの色たちはこんな感じで命名することができます。
$color-gray-13: #222222; // ←HSVでは(0, 0, 13)の色なので13を用いて $color-gray-13
$color-gray-17: #2c2c2c;
$color-gray-31: #505050;
$color-gray-44: #707070;
$color-gray-53: #888888;
$color-gray-63: #a0a0a0;
$color-gray-67: #aaaaaa;
$color-gray-82: #d0d0d0;
$color-gray-88: #e0e0e0;
$color-gray-94: #f0f0f0;
$color-gray-96: #f4f4f4;これで新しく色が増えても命名に困らず、どっちが白いかも悩まず、変数名も最後の番号なんだっけ?くらいの思い出しでOKです。
ちなみに、「murket」ではより分かりやすくするため以下のように用途に合わせた変数を再定義しているものもあります。
$border-main: $color-gray-94;
$font-main: $color-gray-13;
$icon-main: $color-gray-31;
$background-disabled: $color-gray-82;
$background-btn: $color-gray-96;続いて、@mixin(ミックスイン)についてです。
mixin(ミックスイン)って？
「mixin(ミックスイン)」というのは、よく使うスタイル（レイアウト）等をあらかじめ変数として定義しておいて、使いまわしたい時に呼び出せるお役立ち機能です。
先程の変数は値を入れるものでしたが、
Sassでは↓のように頭に @mixinを付けて定義、頭に @include を付けて使用することができ
// @mixinの定義
@mixin disable-text {
color: $color-gray-82;
font-size: $font-small;
line-height: 1.5;
}
// @mixinの使用
.selector {
@include disable-text;
background: red;
}CSSにすると↓のようになる
.selector {
color: #d0d0d0;
font-size: 14px;
line-height: 1.5;
background: red;
}というものです。
@mixinは引数を持つことができるので↓のようにすることもできます。
// @mixinの定義
@mixin disable-text($line-height: 1) { // 引数があったらそれを$line-heightとして使用、デフォルト値は1
color: $color-gray-82;
font-size: $font-small;
line-height: $line-height;
}
// @mixinの使用
.selector {
@include disable-text(1.5);
background: red;
}CSSにした結果は先程と同じなので割愛します。
変数同様に「サイトで統一したいものがある」という場合や、「こうしたい時は大体書くこと決まってるよね」ということがあったりする時にとっても便利です。（公式サイトの説明はこちら）
「murket」では何を@mixinにしてたの？
大きく以下4つを@mixin化していました。
①テキスト
②SVGで作られるアイコンの設定
③z-index
④position: absoluteでの中央揃え
全部詳細を書くと長くなってしまうので、
今回は「サイトで統一したいものがある」の例として③z-indexについて、「こうしたい時は大体書くこと決まってるよね」の例として④absoluteについて詳細を書きます。
具体的な@mixinの定義方法は？
まずは③z-indexについて。
「murket」では何が何の上にあるのかが分からなくならないようにz-indexの値を@mixinで管理していました。
// @mixinの定義
@mixin z-index($target) {
@if $target == 'modal' {
z-index: 30;
}
@else if $target == 'overlay' {
z-index: 25;
}
@else if $target == 'header' {
z-index: 20;
}
@else if $target == 'float-element' {
z-index: 10;
}
}
// @mixinの使用
.modal {
@include z-index('modal');
}
.header {
@include z-index('header');
}これにより「あれ、モーダルを出したのにヘッダーの後ろに回っちゃったよ！？」というバグの発生が少なくなったり、バグの発見が早くなりました。また、各スタイル宣言場所で確認しなきゃいけなかったz-indexの値も@mixinでパッと見て分かるようになりました。
最後に④absoluteについて。
positionをabsoluteにして中央に設置したい時などは書くことが大体決まっているので@mixinにしてしまいます。
// @mixinの定義
@mixin center-alignment {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// @mixinの使用
.parent {
position: relative;
}
.child {
@include center-alignment;
}これにより決まりきったものを書く手間が若干省け、書き間違いなどのリスクも減少しました。
以上、簡単ですがmurketで使っているSassの変数や@mixinを一部紹介しました。
個人的には開発着手時に何をどのように定義すればやりやすいかな??と悩むことが多かったので、一案としてお役に立てればなと思います！
さいごに
ゆるりに戻ります！おおくぼさんありがとうございました👍
いかがでしたか？？
そんなおおくぼさんがWebデザインの開発をしたmurket採用ストアはこちらの記事で紹介しているので興味がある方は見てみてください！
レコチョクは「音楽×IT企業」と言っているだけあって、社内の4割はシステム部門だったりもするので、これからもわたしが学んだ情報やIT目線での考察も少しずつnoteで更新していきますね～💻