初心者Webデザイナー・コーダーこそSCSSを使ってみよう。

Web/04 Aug 2015

久しぶりに Web 関連の話題を。

初心者デザイナーは css や html を書くのが苦手、初心者コーダーも感覚的に作成されたデザインを見ると辟易する、ということはないでしょうか。ちなみに私は、超感覚なデザインファイルを送られると、壮絶なダメ出しをします。

自分が思うに、css が苦手、難しいと思うのは、書く前にノープランだから。デザインがあっても、余白やフォントサイズ、見出しレベルなどを気にせずに作成された場合は、ほぼノープランと変わらず、やりながら「何か違うな」と感じると思います。

そういう時は思い切って SCSS を使ってみても良いかもしれません。もちろん、基本的な CSS を書けるレベルは必要ですが、SCSS を活用すれば、細かい仕様や定義を整理することにも役立つ場合があります。

今回は、SCSS を使うことを躊躇している方や CSS は分かるけど苦手に感じている初心者デザイナー・コーダーの方々が、「そこまで言うなら使ってみようかな」と思ってもらえるように書いてみます。

SCSS の詳細は使い方(コンパイルとか)は、他の方がすごく分かりやすく書いてくれているのと、困った時のドットインストールがあるので省略します。

SCSS って?

CSS を生成するためのメタ言語のこと。SASS という別言語もあるのですが、デザイナーやコーダーにとっては、ちょいと癖のある記法です。それに比べて、SCSS は以下のように CSS 風に記述することができます。

.page-title {
  color: #222;
  font-size: 14px;
  margin-bottom: 16px;
  padding-bottom: 16px;
}

あれ、CSS と同じでないかい?と思った方。そうです。これが CSS 風なのです。 でも、これなら無理に SCSS を使う必要が無いように思えてきます。

SCSS を使うメリット

SCSS は CSS の拡張言語なので、CSS 記法そのままで書けます。もう少し SCSS っぽい観点で掘り下げてみます。

変数が使える

以下の例は、CSS 風な上の例を変数を使って表したものです。

.page-title {
  color: $gray-dark;
  font-size: $font-size;
  margin-bottom: $gutter-margin;
  padding-bottom: $gutter-padding;
}

プロバティの値が全て$で始まる文字列に置き換わっています。これが変数です。

$gutter: 24px; //== グローバル変数

.page-title {
  $gutter-margin: 16px; //== ローカル変数
  margin-bottom: $gutter-margin;
  padding-bottom: $gutter;
}

ローカル変数は、{}内だけで使え、グローバル変数は SCSS ファイル全体で使うことができます。この変数を活用すれば、複数人で作業したり、他の人が手を加える際にもデザインの統一性を損ないません。

変数専用のファイルを用意する

私は _variables.scss という定義だけのファイルを作成します。 そこには、以下のような設定をあらかじめ決めて記載しておきます。

  • カラー

    • $primary-color (ブランドイメージなどの最優先すべき色)
    • $secondary-color (次に優先する色)
    • $accent-color (アクセントとすべき色)
    • $text-color (文字色の基本色)
    • $border-color (ボーダーの基本色)
    • $link-color (リンクのテキスト色)
  • フォント

    • $font-family (サイトで使うフォントファミリー)
    • $font-size-base (フォントの基本サイズ)
    • $font-size-h1 (見出しの基本サイズで h1 から h6 まで設定)
  • 余白

    • $gutter (余白の大きさ)
    • $padding-vertical (横方向の padding)
    • $padding-horizontal (縦方向の padding)
  • ボタン

    • $btn-primary-color (ボタンのテキスト色)
    • $btn-primary-bg (ボタンの背景色)
    • $btn-primary-border (ボタンの枠線色)

他にも、レスポンシブ用のメディアクエリのブレークポイントの幅や z-index の一覧、フォームなどいろいろ記載しますが、一番重要なのは色と余白、要素の大きさの管理です。

初心者でこれらの管理が出来ていない人が多く、結果、ガイドラインを基に修正するなど無駄な作業が増えてしまいます。それなら、デザイン時にガイドライン作って、変数定義までやっておけばかなり楽です。

細分化して作業できる

このサイトの CSS は site.css というファイル名でして、 site.css.scss という SCSS ファイルをコンパイルして生成しております。その中身は以下のような感じ。

@import "colors"; // _color.scssというファイル名を読み込む
@import "variables";
@import "mixins";

@import "sanitize";
@import "scaffolding";

@import "utility";
@import "accessibility";
.
.
.

SCSS では、partial(パーシャル)という機能で、ファイルを分割して作成していくことができます。 上の例では、 site.css.scss に分割した SCSS ファイルを @import の形式で読み込ませます。CSS ファイルを生成(コンパイル)すると site.css にまとめて出力され、分割したファイルが個別に出力されることはありません。

この時、読み込ませるファイルは、 _colors.scss_variables.scss_mixins.scss のように接頭辞に _ をつけておきます。 _ をつけておかないと CSS ファイルとして個別に出力されてしまうので要注意。

こうすることで、機能ごとやページごとなど開発を細かく分けて行うことができ、管理もメンテナンスも楽になります。変数定義が用意されていれば、色程度なら変数の色指定を変更するだけで修正が済んでしまいます。

作業を自動化、効率化しやすい

@mixin というものを使えば、類似する記述を効率的に書くことができます。 @mixin は自作関数のようなもので、@include を使って呼び出します。良く使うスタイルは関数化しておくとかなり便利です。とはいえ、言葉だけではわかりにくいので、実際にコードを見てみましょう。

@mixin button-maker($background, $color) {
  // ボタン用の関数
  background-color: $background;
  color: $color;

  &:hover,
  &:focus,
  &:active {
    // ネストして書ける(内包化)
    background-color: darken($background, 10%);
    color: $color;
  }
}

.button-primary {
  // ボタン関数の呼び出し
  @include button-maker($btn-primary-bg, $btn-primary-color);
}

上の例は、button-makerというボタンの背景色とテキスト色を定義した関数を@mixinで定義し、.button-primary内で呼び出しています。これがコンパイルされると、以下のような CSS になります。

.button-primary {
  background-color: #4285f4;
  color: #fff;
}
.button-primary:hover,
.button-primary:focus,
.button-primary:active {
  background-color: #1266f1;
  color: #fff;
}

@include button-maker($backgroud, $color) の部分を変数やカラーコードに置き換えれば、自動であらかじめ指定したスタイルを生成してくれます。応用すれば、複雑な記述だって自動化可能です。

他にもスタイルを継承させる @extend もあり、これらを覚えれば、CSS とは比べものにならないくらい効率的にコーディングできます。

変数だけでも使えると楽

詳細な機能や仕組みは既にたくさんの方が記載されていて、すごいまとまった良記事多しです。例えば、「scss mixin」とかで調べれば、参考になる記事にすぐに出会えます。

@mixin や紹介していないですが、@extend@if@loop などは、最初から使いこなすのは難しいかもしれませんが、変数ならとっつきやすいはずです。 また、変数の定義とその扱い方がわかってくれば、管理しやすくメンテナンス性の高い SCSS(CSS)ファイルになり、個人でもチームでも作業効率が劇的に上がります。

一度 SCSS やり始めると、素の CSS 書くのがイヤになりますよ。

やり始めて興味が出てくれば、下の本は参考になります。でも、本当のオススメは、BootstrapとかMaterial Desiagn Liteといった、CSS フレームワークの SCSS 版を見ることかもしれませんな。私はフレームワーク見て、やり方覚えましたよ。