Sassとは？ Sassの基本について

CSSは書いたことがあっても、Sassは書いたことない、難しいのではないか、そう思っている人はいないでしょうか。

SassはCSSを書いたことがある人ならそこまで難しいものではありません。この記事ではSassの基本について紹介します。

Sassとは

言葉で説明する前に、実際のコードをまず見てみましょう。

CSS

Sass（SCSS記法）

CSSで書いたものがSassだとこのように書くことができます。

Sassとは、CSSを拡張したメタ言語です。メタ言語と言っても馴染みがないかもしれませんが、メタ言語とは、「ある言語について何らかの記述をするための言語」です。

それだけでは具体的な利用に関する目的をもっておらず、特定のルールを加えることで具体的な応用として利用可能です。Sassの場合は「CSSに対して機能を拡張した言語」となります。

Sassができた背景

Sassができた背景として、開発者であるハンプトン・カトリン（Hampton Catrin）とネイサン・ワイゼンバウム（Nathan Weizenbaum）がCSSの新しい仕様を待つのではなく、自分たちで使いやすいCSSを作って、既存のCSSに合うように変換すればいいことに気づき、2006年に初めてHaml*と一緒に誕生したのがSass（SASS記法）でした。

*HamlとはHTMLを簡単に書くことができる記法のこと。

Sassを使うと便利な理由

上記のコードのように入れ子にすることができるので、書く量を減らしたり、クラス名がもしかぶってしまい、ほかにもスタイルが適用されてしまうということが起こりにくいです。また、Sassでは変数（$base-font-color）を使うことができるので、文字色や文字サイズが変わっても、全部の箇所を変更する手間が省けます。

まとめ

今回は、Sassについて解説しました。SassはCSSの使いにくかった部分を使いやすくするためにできた非常に便利なものです。