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

scss

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

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

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

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

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

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

SCSSって?

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

<!-- scss -->
.page-title {
  color: #212121;
  font-size: 13px;
  margin-bottom: 16px;
  padding-bottom: 16px;
}

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

SCSSを使うメリット

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

変数が使える

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

.page-title {
  color: $gray-dark;
  font-size: $font-size-sm;
  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ファイルをコンパイルして生成しております。その中身は以下のような感じ。

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

//== initial setting
@import "sanitize";
@import "scaffolding";

//== core
@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版を見ることかもしれませんな。私はフレームワーク見て、やり方覚えましたよ。

関連記事