SASSとは
Sass（サース、英: Syntactically Awesome Stylesheets）とは、CSSのメタ言語です。CSSには、ループ処理や関数、変数等が基本的にはありませんが、これらのプログラムっぽい記法を使えるようにし、効率的でいい感じのCSSを掛けるようにしてくれます。
SASSで書かれたスタイルシートは、そのままではブラウザで読めないため、コンパイルしてCSSに変換します。つまりSASSとCSSは、TypescriptとJavascriptの関係のようなものです。
ここでは、SASSの概要とnode-sassを使ってのコンパイルまでを一通りまとめます。詳しい使い方等は別の記事へどうぞ。
SASS と SCSS
SASSには、SASS と SCSS という2つの記法があります。SASSという単語には、CSSのメタ言語としての意味と、その記法とで2つの意味があるということです。混同しないようにしましょう。
SASSの構文
SASS は、インデントが文法的な意味を持ちます。PythonやHaskellと同じような感じですね。もともとはこちらの構文しかなかったのですが、後にSCSSが登場します。
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 10%)
.border
padding: $margin/2
margin: $margin/2
border-color: $blue
SCSSの構文
SASSは上述の通り、CSSと全く異なる構文のため互換性がありません。そこで登場したのが SCSS です。SCSSはCSSの完全な上位互換であるため、CSSをそのままSCSSとしても文法上のエラーにはなりません。そのため、CSSの経験者なら圧倒的にこちらの方がとっつきやすいです。
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 10%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
コンパイル結果
当然にコンパイル結果はCSSとなります。上記SASS,SCSSはいずれも以下のようなCSSにコンパイルされます。なお、このコンパイル結果はWikipediaからの引用です。
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
node-sass で SASS入門
SASSはオープンソースで開発が行われており、公式の実装はRubyで行われています。ですが、Ruby以外にも様々な言語での実装がされています。今回はNode.jsで使える、node-sassを使って、SASSの環境を構築します。
node-sassは、Node.jsの環境が必要ですが、その代わりRubyが不要です。Node.jsはクライアントサイドの開発ではほぼ必須なので、こちらのほうがなにかと便利です。
node-sass のインストール
Node.js がインストール済で、npm が使える環境を用意してください。
node-sass をインストールします。
$ npm install node-sass -g
ここではわかりやすくグローバル環境にインストールしていますが、–save-devでも構いません。
SASS をコンパイルする
まずは以下のようなSCSSの記法で書かれたファイルを用意します。ファイルの拡張子は .scss とします。node-sass は、SASSとSCSS両方の構文に対応しています。
index.scss
// 変数を定義
$my-color: #ff0000;
body {
// 変数を設定
background-color: $my-color;
}
node-sass でコンパイル
node-sassのコンパイルコマンドは、コンパイルするファイル名と出力されるファイル名をそれぞれ指定します。
$ node-sass index.scss index.css
コンパイル結果の index.css
body {
background-color: #ff0000; }
なんか変な感じのフォーマットですが、ちゃんと変数が展開されてCSSとなっていますね。
以上。
