Webディレクターが知っておきたいSCSSの知識

Webサイトは、実にさまざまな言語で構築されています。HTMLにJavaScript、そしてCSSもそのひとつです。

スタイルシート言語と呼ばれるこのCSSですが、これをシンプルに書く方法があることをご存じですか？
基本的にはWebコーダーやWebデザイナーが主に関わる領域の話ではありますが、Webディレクターとしてもその内容を知っておくことが重要です。

今回はWebディレクターが押さえておきたい「SCSS」についてまとめました。

SCSSはCSSの記述法の1つ

Webディレクターの中には、Webサイト構築のためにHTMLやCSSなどのコードを書いたことのある方も少なくないでしょう。

今回ご紹介するSCSSは、従来のCSSの書き方をよりシンプルにした記述方法のことです。
詳しく解説していきます。

まずCSSとは、Cascading Style Sheetsの頭文字を取ったもので、Webサイトの見た目を整えるために使用する言語のことをさします。

HTMLではWebサイトの文書を構築し、その装飾を行うためにCSSを使うというイメージです。

フォントカラーやサイズの変更はHTMLだけでもできますが、そうするとコードがごちゃごちゃになってしまいます。
CSSを使用すれば、装飾に関する情報をまとめたコードのファイルを別で作成することになるため、HTMLファイルをすっきりさせることができるのです。

このCSSをよりクリエイティブなものにするメタ言語が、この章で紹介するSass（サース）です。Syntactically Awesome StyleSheetの頭文字を取ったもので、直訳すると「構文的に・素晴らしい・スタイルシート」となります。

Sassを活用すると、CSSの機能をさらに拡張することが可能に。その意味のとおり素晴らしいCSSを作成できるというわけです。

Sassには、SCSSとSASSというふたつの記述方法があります。それぞれの違いを紐解いていきましょう。

SCSSは、従来のCSSの書き方に近い書き方をする記述方法となります。CSSではクレスタやクラスの区切りに {　} や半角の；を記入しますが、SCSSでもこれは同様です。

そのため、CSSに慣れている方にとってはSCSSのほうが記述しやすいという声が多くなっています。

CSSとほぼ同様の書き方をするにも関わらず、記入するコードが減ります。これはSCSSではコードをネスト（入れ子）して記述できるため。

CSSだと似たようなコードがファイル上に長々と並び、知識がないとちんぷんかんぷんなこともあるのではないでしょうか。SCSSになるとファイルがすっきりまとまるため、これからCSSを学ぶ初心者の方にもとっつきやすくなるわけです。

SASSは、SCSSをさらにすっきりさせたものです。具体的には {　} や半角の；が不要になります。
より簡単ならSASSのほうがよいのでは？と感じる方もいらっしゃるかもしれませんが、従来のCSSに慣れている方にとっては違和感を覚えてしまうこともあるようです。

そのため、現在は前述したSCSSのほうが普及しています。

便利なことばかりに思えるSCSSですが、ここで改めてメリットとデメリットをまとめてみましょう。

まずは先ほども解説した、ネスト化です。何度も同じ指定をしなくてもよくなるため、コードが全体的にすっきりまとまります。

変数も使用できるため、Webサイト全体に反映したい背景色やフォントの色、サイズをまとめて指定することも可能に。
また演算もできるため、変数と合わせて使うことで、イレギュラーな表示にしたい箇所があるときにも柔軟に対応できます。

CSSを書くためには、テキストエディタがあればOKです。しかし、Sassを導入するためにはRuby（ルビー）というプログラミング言語をPCにインストールする必要があります。
これがないとSassが動いてくれません。

まずはRubyをインストールし、その上でSassをインストールすることで、やっと準備完了の段階に立つことができます。

また、Sassを書いたら、それをCSSに変換（コンパイル）する必要があります。そうしないとPCはSassを理解してくれません。

このように導入に手間がかかったり、これまでCSSを書いてきた方にとってはSassの起動方法に戸惑ってしまったりする点が、デメリットといえるでしょう。

Webディレクターの中には、コーディングの知識はあっても実際にはできないという方も多いかもしれません。
しかし、一切できないよりかは、少しはできるほうがよいというのが正直なところ。実際にコーディングができるWebディレクターが多いのも事実です。

今回紹介したSCSSについても、使いこなせる必要はありません。しかしどんなものなのかを理解しておくだけで、プロジェクトへの導入を検討できたり、Webコーダーとのやり取りがスムーズになったりするメリットもあります。

Webディレクターとして幅広い知識を持っておいて損をすることはないため、SCSSについても積極的に学んでみてくださいね。