初心者のためのSCSS。変数とパーシャルを覚えて統一性のあるコードを書こう

初心者のためのSCSS

ハンバーガーメニューを使っているサイトをよく見かけますが、見た目先行で効果が出にくいようです。

GIGAZINEの記事 - なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?

クライアントにハンバーガーメニューを実装して欲しいと言われることもありますが、ターゲット層によってはほとんどクリックされません。実際に自分のサイトで2ヶ月間ハンバーガーテストをしましたが、ヒートマップやページ分析ツールで見ると全く押されていなかったです。

で、お盆に入って少し落ち着いたので、ハンバーガーをやめること、データから分析した観点でUIを修正すること、リファクタリングの3点を行いました。リファクタリングはコード内容を見直して、冗長な記述や重複箇所、プログラムの効率化を図る作業のことで、定期的にこれを行うとよろし。

今回は、このサイトのSCSSを再構成したこともあり、初心者がSCSSを始める際に理解しておくべきパーシャル変数についてまとめました。特に変数定義はSCSSの肝で、脱初心者となるには必須の知識と思っています。

パーシャルで機能ごとにコーディングする

このサイトは、site.scssというSCSSファイルをCSSに変換して読み込ませていますが、作業時は以下のように、機能や内容ごとにファイルを分けています。

// site.css.scss

@charset "utf-8";

// definitions
@import "variables"; // 変数定義
@import "mixins"; // 関数定義

// initial setting
@import "normalize"; // リセット
@import "scaffolding"; // 基本設定
@import "utility"; // アイコンや何度も使うスタイルのまとめ

@import "media-base"; // 全デバイス共通のスタイル

// responsive
@import "media-mobile"; // 480px以下(モバイル)に適用するスタイル
@import "media-mobile-lg"; // 620px以下(ファブレット)に適用するスタイル
@import "media-tablet"; // 768px以下(タブレット)に適用するスタイル

全て書くとかなり長いので、結構省略しました。

@importでSCSSファイルを読み込む

1ファイルで全てのスタイルを書いていくと膨大な記述になり、可読性が悪くなります。なので、一定のルールでファイルを分割して開発すると変更・修正がしやすくなります。

そこで活躍するのが@importで、他のSCSSファイルを読み込むことができます。記述方法も簡単で、拡張子は書かずに@import "variables";のようにするだけ。出力するファイルから見た相対パスなので、ディレクトリ構造には注意してください。

読み込ませるファイル名を変更する

複数のファイルに分割することをパーシャル(partial)と言い、パーシャル化するSCSSファイルのファイル名の先頭に_を付けます。
上の例でいうと、"variables"は_variables.scssというファイル名ですね。また、site.css.scssは分割したSCSSファイルを統合してCSSファイルとして出力するため、_は付けません。

_は、SCSSからCSSに変換する時に個別のCSSファイルとして出力しないでねという意味です。

このパーシャルを活用すれば、複数人で作業分担する時もかなりスムーズです。コメントアウトして分担指示を残すこともいらなくなるかもしれません。

ちなみに、コメントアウトで作業メモを残す時は、TODO:を使うようにしましょう。

// TODO: 未完了の作業タスクを記述

コード内を検索する時にTODOで調べればよいので管理しやすく、テキストエディタによっては、TODOコメントを以下のようにわかりやすく表示してくれたりします。

TODOのコメントアウト

統一されたデザインを行うための変数定義

ダメなデザインになるポイントの一つに「統一性」があります。ダメデザインは余白やフォント、行間、配色に統一性がなく、ひどい時は各ページでの差異がめちゃ大きい時もあります。こういうのに出会うと「片手間でやってるな」と変に勘ぐってしまいます。

変数であらかじめ定義しておく

先ほどのパーシャルで言うと、自分はsite.css.scssに最初に読み込ませている@import "variables";に変数定義をずらーっと書いています。

作業中のSCSSファイルに変数定義する人もいるのですが、管理面とサイト全体の統一性の観点から変数定義専用のファイルを用意するのが良いです。

で、実際には下のような形式で変数定義します。(抜粋してます。)

// _variables.scss

// Scaffolding
$body-bg: #fff !default;
$text-color: #212121 !default;
$link-color: #2962ff !default;
$link-hover-color: darken($link-color, 5%) !default;

// Gutter
$gutter: 20px !default;
$gutter-large: $gutter * 2 !default;

変数の使い方

変数定義は簡単です。変数名と値を書くだけです。

// $body-bg に #fff を格納する
$body-bg: #fff !default;

定義した変数は、SCSS内で以下のように使用します。

$body-bg: #fff !default;

.contents {
  background: $body-bg;
}

// これをCSSにコンパイルすると
.contents {
  background: #fff;
}

変数の値が、CSSにコンパイルされる時に値に置き換わります。で、変数定義時に指定した!defaultですが、「変数に値が設定されていない時にだけ設定されるようにする」ためのものです。実際の挙動を見た方が早いので見てましょう。

See the Pen RPOqKE by mdesign (@mdesign-works) on CodePen.

Codepenの上記コードの「VIEW COMPILED」で確認すると、$color-primary: #42bd41 !default;の部分は適用されていません。これは!default;を付けることで変数に値が設定されていない時にしか変数が設定されないからです。なので、その下の「test2」では、後から設定された変数$color-secondaryに値を上書きされていますね。

配色も思いのまま

配色を変更できる関数がSCSSでは用意されています。例えば、リンク時のテキスト色を決めておけば、ホバー時の色設定も関数を使うことで規則性を持たせることができます。

// darken($color, $amount);

$link-color: #2962ff !default;
$link-hover-color: darken($link-color, 5%) !default;

.link-text {
  color: $link-color;

  &:hover {
    color: $link-hover-color;
  }
}

上記をコンパイルすると以下のようなCSSが出力されます。

.link-text {
  color: #2962ff;
}
.link-text:hover {
  color: #104fff;
}

darken($color, $amount);はカラーの明度を指定した % 分だけ下げて暗くします。逆もあってlighten($color, $amount);では明るくしてくれます。

他にも彩度やグレースケール、補色などカラー設定の関数が多く用意されており、$colorの部分はあらかじめ定義した変数を入れることもできます。ということは、変数設定で色定義もちゃんと行っていれば、規則的な配色が可能となります。

演算もできる

演算は高頻度で使います。デザインしていると計算する項目が多くCSSを使っていた時はスマホの電卓で計算していたこともありましたが、今ではSCSS上で計算しています。

下のコードでは、$gutterという変数に余白の基本設定の20pxを定義し、$gutter-largeという大きい余白サイズには基本サイズの2倍の大きさとなるようにしており、下コードの$gutter-largeには40pxが定義されています。

// Gutter(余白の間隔)
$gutter: 20px !default;
$gutter-large: $gutter * 2 !default;

この程度の計算でも変数定義しておくと、$gutterの値を変更した時、それに合わせて$gutter-largeも再計算されるので、統一性が保たれます。

変数とパーシャルが使えればなんとかなる

SCSSには関数が豊富に揃っており、色や演算以外にも条件式や比較式、自作関数作成などCSSでは到底できない機能が満載です。常々言っておりますが、一度SCSSに手を出すと素のCSSを書くことに辟易します。
ただ、SCSSを難しいと思い込んで手を出しにくい人も一定数いるようです。

変数とパーシャルだけ覚えとけ

基本はこれさえ理解できれば大丈夫。変数定義はサイト設計の基礎となる重要な部分で、コーディングの初期段階で全て定義できるようになると、その後の作業が爆速で進みます。で、さらに早くしようとするとスニペットや関数などの興味が湧いて、知らないうちに覚えてます。(たぶん)

本格的に勉強したい人は変数とパーシャルを覚えた後で、この本読むと良いかも。

もしくは、困った時のドットインストールで。
Sass/SCSS入門 (全15回)

関連記事