Sassを解説 - 面倒なCSSは楽に書こう -

Sassを使ってCSSをわかりやすく書いてみよう！

はじめに

CSSはある程度書けるけれど、何だかごちゃごちゃしてしまっていませんか？

CSSは、HTMLでマークアップされた構造に対して1つ1つデザインを付与し、WEBページの見栄えをよくするためのものです。まさにWEBページの顔と言える存在であり、CSSが適用されていないページというものは意図的に用意しない限りはまず存在しないと言っても過言ではありません。それだけ重要なCSSは、マークアップ言語を学ぶ上でHTMLと共に学習する機会もあり、初心者にとっても馴染みの深いものではあります。

Sassとは？

Sassは、CSSのプリプロセッサ、メタ言語です。わかりやすく言えば、プログラミング言語として独立しているわけではなく、「CSSを書くために生まれた言語」です。

CSSのようなマークアップ言語の記述ルールは一般的なプログラミングのルールと比べて非常に緩く、基本的には自由に記述することが可能です。どのように記述してもエラーが起こることはありません。ゆえに後から後から自由に要素を書き足していき、タグを増やしていき...というように無尽蔵に書き続けることが可能です。マークアップ言語の初心者にとってはエラーで心をへし折られることもないので、色々CSSをいじって試すことも出来るのですが、後からそのCSSファイルを見てみると、「どこに何を書いたのかがわからない」「前にも同じような内容のCSSを書いた」「修正したはずのルールがまだ適用され続けている」「!importantを大量に書いてしまってどこに何が適用されているのかがわからなくなってしまった」「テーマカラーを全て修正できたかどうかがわからない」「ぐちゃぐちゃ」と言った自体に陥ってしまうことが当然のようにあります。

自由に記述できてしまうというのは大きなメリットになる反面、一歩間違えればあっという間にぐちゃぐちゃになり混乱を招くというデメリットを持ち合わせています。

そういったCSSを、プログラミング言語のように記述できるようにしたものがSassなのです。

Sassの拡張子は「scss」です。

Sass の特徴

前述の通り、CSSをそのまま書いた場合にぐちゃぐちゃになってしまいがちな部分をまとめ上げ、CSSを楽に書くための機能がたくさん備わっています。それぞれの特徴を見てみましょう。

入れ子構造で記述することができる

CSSでは、異なる名前のセレクタを書きたい場合、1つ1つ別のセレクタとして書く必要がありました。それが例え、セレクタ同士で繋がり名前のセレクタであってもです。CSS設計を用いてフロントを設計する場合などにおいては末尾だけが別の名前になっているというセレクタも数多く存在するのが普通です。

(例えば、"button"セレクタに対する、"button--link"、"button--submit"セレクタというように、前半は同じ名前のセレクタで後半だけが異なるといったもの。)

それらに関してもセレクタを小分けし、全く同じ内容のプロパティを記述しなければならないといったことも起きてしまいます。非常に時間の無駄が生じやすく、また仮に修正点が浮上した場合でも全てのセレクタに対して同じ修正を施さなければならず、保守性の面で見てもそのままのCSSでは何かと不都合があるのです。

その点、Sassでは入れ子構造を使って記述することが可能です。例えば、"button"のセレクタの中に、&--link{}と囲むことで、"button--link"セレクタを作成したことと同じ意味になるのです。入れ子構造で記述することにより、同じ内容のセレクタ記述の手間を大幅に削減することが可能です。また構造も確認しやすく、修正の手間を削減できるため、保守性の上昇にもつながります。

注意すべき点は、入れ子構造という特徴のために、スタイルを記述する階層を間違えてしまうと色々な部分に影響が出てしまうというところでしょう。記述をしたら早めに確認をしてみて、間違えた場所に記述していないかを確認しましょう。

「変数」を使うことができる。

CSSには、「変数」という概念がありません。一般的なプログラミング言語では、何度も使われる値や文字列は変数に代入して、その変数を使い回すことが基本です。1つ1つをベタ書きすると、何かあったときにベタ書きした全ての箇所を修正しなければなりませんが、変数を使っていれば、その変数を修正するだけで、変数を用いて記述した箇所全てに変更が適用される状態を作り出すことができるため、保守性向上のために変数は積極的に用いられているものです。

しかし、変数の無いCSSにおいてはよく使う値であってもどこかにその値を保存する手段がないため、CSS記述をする際には直接プロパティの値として指定しなければなりません。

当然、後から仕様変更などが入って修正を余儀なくされた場合には目も当てられません。例えばプロジェクト内で決められたテーマカラーやフォントがあったとしても、急な要件変更が起きた時などには1つ1つ修正しなければなりません。時間をかけて1つ1つを修正し、万が一修正に漏れがあった場合は地獄でしょうね。

一方で、Sassではあらかじめ変数を定義することが出来ます。この変数の中身を変えるだけで対応することが可能です。保守性向上に大きく役立ちます。

例えば、よく使うフォントや、要件定義で決定づけられた基本的な配色などを変数として用意しておくという使い方をします。

mixin

Sassで使うことができるのは変数だけではありません。プログラミング言語においては当たり前に存在する「関数」や、「プロパティをまとめたもの」を使うことができます。

これを" mixin "と言います。

mixinはプロパティを事前にまとめておくためのものです。よく使うプロパティがある場合に、このmixinを使って定義しておくことで、同じプロパティを色々な箇所に書く手間を省くことができます。もちろん「関数のようなもの」であるため、引数を取った上で処理を行うことが可能なのです。

mixinがよく使われるようなパターンとしては、レスポンシブデザインの設計を行う時のメディアクエリの記述などがあります。レスポンシブデザインでは、一般的なパソコンで見るような大画面サイズや、iPadなどのタブレットサイズ、iPhoneやAndroidなど、媒体ごとに様々に変わる横幅に対応するためにその横幅ごとのスタイルを記述していく必要があります。「横幅が768px以上であればこのスタイルを適用する」、「414px以上768px未満であればこちらのスタイルを適用する」、というように1つ1つサイズを変えた上で記述をする必要があります。

実際のところ、メディアクエリの記述は、対応する画面サイズを指定する以外は全く同じように書けてしまいます。それなのに何度も同じ記述をする...書き間違いがあったら探すのも一苦労。変数と同じでこれでは保守性がよくありません。そういう意味でも、mixinの使い所と言えるかもしれませんね。

なお、変数は汎用的に使えるのですが、mixinは変数ほどには使う場面は少ないかもしれません。それでも覚えておくと便利な機能であるので、使える場面を探して是非使ってみましょう。

インポートを使ってSassファイルをまとめて使おう

Sassファイル内では、別のSassファイルをインポートすることができます。

SassファイルをまとめておくルートSassファイルを1つ用意して、Sassファイルを小分けするというファイル管理を行うことが可能です。

これの何がメリットになるかというと、「ジャンルごとにファイル分けしてスタイルを書くことができる」という方法を取れるのです。

特にCSS設計を行う上で便利で、例えば「レイアウトだけを記述したSassファイル」「カラーだけを記述したSassファイル」「フォントだけを記述したSassファイル」「ヘッダー用Sassファイル」「フッター用Sassファイル」「ユーティリティだけを記述したCSSファイル」というように、役割ごとに整理してファイル管理を行えます。

元のCSSでもコメントアウトでどこに何を書いたかをメモすることは可能ですが、それでも限界はあります。

保守性を高めることに大きく貢献してくれるので、積極的にファイル分けを行いましょう。

Sassの注意点 - Sassは読み込めない -

Sassファイルは確かにCSSを楽に書くための言語ではありますが、それで出来るファイルはあくまでも「Sassのファイル」であり、「CSSファイル」ではありません。これが何を意味するかというと、「HTMLでSassファイルを読み込むことはできない」ということです。

つまり、Sassファイルをそのまま読み込ませようとしても何も起こらないのです。では、SassはどのようにしてCSSと認識してもらうのでしょうか？

SassをCSSにコンパイルしよう

HTML内で読み込むのはあくまでもCSSファイル。そのため、SassファイルをCSSファイルにコンパイルします。

gulp-sassやLaravelMixなどに代表されるSassをコンパイルするためのツールはいくつかあります。ツールを使ってSassで書いたファイルをCSS形式に自動で直してもらい、その直してもらったファイルをHTMLで読み込んで使いましょう。

いかがでしたか？

簡単なWEBページを作るのならばCSSでそのまま書いてしまった方が時間はかからないかもしれませんが、少し規模の大きいWEBページを作成する場合は、保守性も考えなければなりません。Sassは学習コストもかからないので是非導入することをお勧めします。