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

Web/14 Aug 2015

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

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

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

$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 youthminor (@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 回)