Sass とは

CSSでは使えなかった、関数や変数を使っての記述が可能となり、また入れ子構造を使うこともできます。そのため、プログラミング言語を扱うような感覚で記述できることが大きな特徴です。

Sass の特徴

CSSを楽に書くための機能がたくさん備わっています。

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

CSSではセレクタ名が違った場合、1つ1つ別のセレクタとして書く必要がありました。 CSS設計を使う場合などにおいては、末尾だけ別の名前になっているだけのセレクタも小分けして、全く同じ内容のプロパティを記述しなければならないといったことも起きてしまいます。 Sassでは入れ子構造が使えるため、同じ内容のセレクタ記述の手間を大幅に削減することが可能です。入れ子になっているため構造も確認しやすく、保守性の上昇にもつながります。

変数

CSSには変数という概念がありません。そのためCSS記述の際には直接プロパティの値として指定しなければなりません。

例えばプロジェクト内で決められたテーマカラーやフォントがあったとしても、直書きする必要があり、急な要件変更が起きた時などには1つ1つ修正しなければなりません。 Sassではあらかじめ変数を定義することが出来るため、この変数の中身を変えるだけで対応することが可能です。保守性向上に大きく役立ちます。

mixin

変数だけではなく、関数や、プロパティをまとめたものも使うことができます。 mixinはプロパティを事前にまとめておくためのものです。よく使うプロパティがある場合はmixinを使って定義しておくことで、同じ内容のプロパティを書く手間を省きましょう。

Sassの注意点

Sassを使えばCSSをより楽に、素早く記述することができます。しかし、出来ているファイルはあくまでSassのファイルであり、CSSファイルではありません。
HTML内で読み込むのはCSSファイルです。そのため、SassファイルをCSSファイルにコンパイルしなければなりません。

Sassをコンパイルするためのツールはいくつか種類があるので、どれかをインストールしてCSSのコンパイルを忘れずに行いましょう。