使い方によっては、素のCSSよりも分かりにくくなります。
ネガティブな内容かもしれませんが、ざっとSass(SCSS)をまとめてみます。

Sass(SCSS)とは

Sassとは、Syntactically Awesome Style Sheetsの略です。
CSSを便利に書くために作られた言語で、似たものでは、LessStylusというものがあります。

実際にブラウザで認識させるには、CSSに変換する必要があります。

Sass: Syntactically Awesome Style Sheets

二つの書き方

Sassには、二つの書き方があります。

  • インデントでネストを管理し、{}や;が必要がない書き方。
    拡張子は「.sass」
  • CSSと同じように記述し、Sassの機能を使うことができる書き方。
    拡張子は「.scss」

CSSと共存できるSCSSの書き方が、主流です。

Sassの環境

コマンドラインアプリケーションから使うことができます。
Rubyをインストールし、テキストエディタから扱うことが一般的だと思います。

おもな機能

変数、ネスト、ミックスイン、セレクタの継承などがあります。

変数

変数を使うことができます。
演算なども行えます。

SCSS

CSS

ネスト(入れ子)

ネスト(入れ子)にすることで、何度も同じid/classを書かなくても、関連したスタイルをまとめることができます。

SCSS

CSS

ミックスイン(mixin)

スタイルを定義し、呼び出すことができます。

SCSS

CSS

セレクタの継承(extend)

共通のスタイルをまとめてくれます。

SCSS

CSS

そのほか

importコメントは、CSSのものよりも便利になっています。
また、複数の関数が用意されており、自作することもできます。

意外と便利ではない理由

私が感じたことは、以下の五つです。

Sassの混沌化

CSSをきちんと書けない人が、Sassを利用すると混沌としやすいです。
簡単な変数ネストでも、複雑にさせることができます。

BEMやSMACSSのスキル

CSSにBEMSMACSSといった書き方があります。
日頃から意識していると、Sassを利用しなくても、見やすいCSSが書けます。

ご利用は計画的に

Sassには、多数の機能がありますが、計画的に利用しないと、あとで大変なことになってしまします。
誰でも、視認性の低いソースを触るのは、精神的につらいです。

CSSはプログラムではない

全てでないですが、Sassを使えば、プログラムのように書けます。
しかし、CSSを書く人間の全てが、プログラムを読めるわけではありません。
さらに、今のところSassのプログラム的な記述は、視認性が低いと感じます。

エディタの力

少し前の記事では、Sassならベンダープレフィックスを気にしなくても大丈夫、とあります。
しかし、ベンダープレフィックスだけならSublime Text、Brackets、Atom Editorでは、Autoprefixerなどを使う方が良いです。
他にも、エディタでフォローできる機能がいくつもあります。

postcss/autoprefixer

Sassとのつきあい

ざっくりと書きましたが、今のところ、Gulpなどタスクランナーで使うのが、ベターな気がします。
無理に多くの機能を使わず、自分にあったものだけを使いましょう。

あとは、プロジェクトチームがSassを採用した場合に、ついていけるだけの少しの知識さえあれば、良いでしょう。

では!

Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために (DESIGN & WEB TECHNOLOGY)
Wynn Netherland Nathan Weizenbaum Chris Eppstein Brandon Mathis
翔泳社
売り上げランキング: 273,836