SCSS/SASSとは

SCSS/SASSは、CSSのメタ言語で最終的にCSSにコンパイルします。
これらをSass（Syntactically Awesome Style Sheets）といいます。
※大文字と小文字の違いだけで紛らわしいですね…

SCSS/SASSの違い

SCSS

こちらが主流です。
スタイルの書き方はCSSと特段変わらず、｛｝や;を用います。
CSSをそのままSCSSファイルとしても動かすことができるので、途中からの導入も可能です。

SASS

{}の代わりにタブで判断し、;を省略します。



Sassでできること

  1. セレクタの入れ子
    CSSだとclassを併記してひたすらに定義していくことしかできませんが、
    Sassなら入れ子が使えるので親子関係を明らかにして定義することができます。

  2. セレクタの継承
    @extend を使うことで、スタイルを継承して定義することができます。

  3. 変数
    $height: 500px;　などと定義して、変数を使うことができます。

  4. 関数
    変数と同様に、関数も定義することができます。

@function square($value) {
  @return $value * $value
}
  1. ファイルの分割管理
    @import を使うと、他のSassファイルをインポートすることができます。
    1つのCSSファイルにコンパイルされるので、サイトパフォーマンスを上げられます。



Compass

Sassをさらに進化させたフレームワークに、Compassがあります。
Compassを利用するためにはCompassプロジェクトを作成し、インポートします。
そして、 compass watch でCompassを起動すると、
Sassファイルに対して変更されたタイミングで自動コンパイルを行います。
停止したい場合は、Ctrl+Cで停止できます。
SassはコンパイルしないとCSSとして利用できませんので、
Sassを使用して開発を行う場合はCompassも合わせて導入しておくほうが便利です。

スポンサーリンク