Sassのミックスインを自分用に整理して制作を効率化する

最近、Webデザインの仕事でCSSを書く量が増えてきたので、よく使うSassのミックスインを自分用にまとめておくことにしました。毎回同じプロパティを手入力していると時間がかかりますし、修正が入ったときにすべての箇所を直すのも面倒です。

特にレスポンシブ対応やベンダープレフィックスの記述は、案件の規模が大きくなるほど手間がかかります。よく使うパターンをミックスインとして登録しておけば、一行で呼び出せるだけでなく、後から見た人にも意図が伝わりやすくなります。本記事では、私が普段の制作で実際に使っているものを中心に紹介していきます。

レスポンシブ対応で活躍するメディアクエリのミックスイン

ブレイクポイントを定義するミックスインは、ほぼ全ての案件で使います。変数のリストをループさせて、複数の画面サイズに対応できるようにしておくと便利です。例えば$breakpointsという配列を用意し、min-widthとmax-widthのどちらでも呼び出せるようにしています。

スマホファーストで設計する場合は@include sp { ... }のように短い名前で書けると、コードが読みやすくなります。デザインカンプから実装に落とし込むとき、デザインからの落とし込みで触れているように、ブレイクポイントの基準を最初に決めておくと作業がスムーズです。

Sassのlightenやdarkenを使えば、ホバー時の色を動的に計算できます。テーマカラーを一つの変数にまとめておき、lighten($primary, 10%)のように呼び出すと、後で色を変えたいときにも一箇所修正するだけで済みます。

透明度を変えたい場合はrgbaに変換するミックスインを作っておくと便利です。HEXで指定した色と透明度を一括で扱えるので、コンポーネントごとに色のバリエーションを持たせるときに活躍します。

フォントサイズと行間を同時に設定するミックスインは、デザインの一貫性を保つために重宝します。font-size: 16px; line-height: 1.8;のようにセットで書きたいプロパティをまとめて定義しておけば、タイポグラフィのルールを統一できます。

remへの変換を自動化するミックスインも作っておくと、ルート要素のフォントサイズを変更するだけで全体のスケールが調整できます。アクセシビリティの観点からも、remベースで組むメリットは大きいです。

よく使うflexboxの指定をミックスインにしておくと、センタリングやスペース配分が楽になります。display: flex; justify-content: center; align-items: center;という組み合わせを毎回書かなくて済むのは大きいです。

absoluteで中央配置するパターンも、ミックスイン化しておくことをおすすめします。top: 50%; left: 50%; transform: translate(-50%, -50%);という記述は、頻出するので一度書けば何度でも使い回せます。

@contentを使ったミックスインを作っておくと、ベンダープレフィックスが必要なプロパティを一括で扱えます。例えばborder-radiusやtransitionを使うとき、-webkit-や-moz-を毎回書くのは非効率です。

PostCSSのautoprefixerを使えば自動化できますが、Sass側でもある程度カバーしておくと、ビルド環境がない案件でも安心です。プロジェクトに応じて使い分けています。

ミックスインを運用するうえで、私が大切にしているルールをいくつか紹介します。

項目	通常のCSS	ミックスイン使用後
レスポンシブ	`@media (min-width: 768px) { ... }` を毎回記述	`@include tab { ... }` の一行で完結
ベンダープレフィックス	`-webkit-` `-moz-` を各プロパティに手書き	`@include border-radius(4px)` で自動付与
色のトーン調整	配色ツールで個別に HEX を計算	`lighten($primary, 10%)` で動的に生成
フォントサイズ	ピクセルで直書き	`@include font-size(16)` で `rem` に変換

ミックスインは一度作れば長く使い回せるので、最初の投資を惜しまず育てていくのがコツです。外出先でコードを確認したいときは、iPhoneからWordPressを更新する要領で、ミックスインのアイデアをすぐメモできます。オリジナルのミックスイン集を育てれば、きっと制作がもっと楽しくなります。