SCSS（SASS）を使うと、CSSの記述や管理がし易くなります。CSSにはない機能も備わっているので、WebデザイナーやWeb制作者におすすめです。
本記事では、SCSSの基本的な知識について解説しています。気になった方はぜひ利用してみてください。
SCSS（SASS）とは？
CSSがもっと便利になるメタ言語のこと
Webデザインの現場では、日常的にCSSを使っているかと思います。SCSS（SASS）とは、CSSを拡張したプログラミング言語のこと。Web業界の方におすすめの、便利なツールです。
SCSS（SASS）は専用の文法を習得する必要がありますが、CSSが使える方にとっては学習コストは比較的低いです。
SCSSとSASSの違い
よくSCSSとSASSを混同している方が多いので、ここでは簡単にその違いについて解説しておきましょう。
SASSとは、CSSを拡張したメタ言語（プリプロセッサ）のこと。Syntactically Awesome Style Sheetsを略して、SASSと呼ばれています。ファイルの拡張子は、.sassです。
一方でSCSSとは、SASSをもう少し書きやすくしたものです。Sassy CSS（SASSに似たCSS）という名前からわかるように、CSSを書くのと似た感覚でSASSが使えるのです。SCSSのファイルは、.scssの拡張子が使われます。
どちらとも便利でよく使われるのですが、SCSSの方が普及しています。以降の記事では、SCSSに話題を絞って進めていきます。
メリット
SCSSを導入した時に得られるメリットです。
CSSコードが減る
SCSSを導入すると、CSSのコード量が減ります。CSSでは冗長だったコードが減らせますし、効率的にコードを作っていくことができます。
コードの保守管理がし易い
SCSSはネスト（入れ子）を使ってコードを書くことができます。コード量も減りますし、視認性も高まります。コードの保守管理が格段にし易くなるでしょう。
バグが減らせる
SCSSを導入すると、バグ（不具合）を減らすことが期待できます。コード量が減ることで、人為的なミスが減ることが主な理由です。
CSSにはない機能が使える
SCSSでは、変数やMixinなど、CSSをもっと便利に使える機能が備わっています。
出力方式が選べる
SCSSは、.scssファイルをコンパイルして.cssファイルを作ります。出力するCSSは、nestedやexpanded、compact、compressedなどの形式から選ぶことができます。
デメリット
SCSSの導入にはデメリットもあります。代表的なものは以下の2つです。
学習コストが必要
SCSSはCSSに似た言語だと述べましたが、とは言っても習得するにはある程度の期間が必要です。SCSSを使う時は、その学習コストについても考えておくようにしましょう。
CSSの修正箇所がわかりづらい
SCSSを使っている場合、CSSを修正するときはその元ファイルであるSCSSを直します。出力されたCSSはコンパイル後のため、コンパイル前のSCSSを修正しなければいけないのです。
しかし、CSSスタイルから該当するSCSSのコードを探すのは面倒です。そのため、場合によってはCSSの修正がしづらくなってしまいます。
あとがき
SCSSを使う場合は、Compassを併用することを強くおすすめします。SCSSを使ったプロジェクトが管理しやすくなりますし、watch機能（自動コンパイル）も使えます。その他にもSCSS専用のGUIツールなどもあります。必要に応じて活用していってください。
