Sassとは

Syntactically
Awesome
Style
Sheet

上記の頭文字を取り、略したものがSassです。イメージとしてはRubyやPHPなどのプログラムで拡張されたCSS、もしくはスクリプトの記述が可能なCSSと捉えるべきです。

大まかな差を説明すると、今までのCSSですと{}の入れ子の中に{}を更に入れることは出来ません。Sassではそれが可能であること、そして構文を用いて作成した後にコンパイルする必要があることです。

もっと噛み砕きますとCSSをよりプログラミングしやすくした言語ということになります。実際にコードを見ると一目瞭然です。ひとつ参考ページを出します。

https://ja.wikipedia.org/wiki/Sass#.E3.83.8D.E3.82.B9.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0

コンパイルすると下記になります。

今までのスタイルシートではHTMLタグの入れ子構造をある程度把握した上でなければ細かいクラスやIDについて記述が出来ませんでした。しかし、SassであればHTMLタグを見ながら、入れ子を意識しながら記述し、その後にコンパイルすることで通常のスタイルシートの記述よりもスリムでスマートに作成することが可能です。

CSSなどの記述・書式などを把握している上で、これらを使いこなすということは更に作業が効率化します。テキスト系のプログラミング作業ですと、1文字の入力に掛かる労力が減るということは全体的な時間の短縮だけでなく、人生における入力数が減ること。そしてその分更に入力することが可能になることがあげられます。作業効率を上げ、更に綿密に作業出来るということです。

直感的に作成しやすいということも作業スピードの向上が見込める要素として考えられます。

Sassには入れ子の他にもプログラムのように記述・コンパイルすることが出来る項目がありますので、CSSをこれから学ぼう。CSS3がいいな!と考えている方は同時に学ぶこともおすすめします。