Sass のインストールとコンパイル(Windows)
Sass のインストールとコンパイル(Windows)
今更ながら、Sass を使い始めたので、Sass の基本的な使い方をメモしていきます。 今回はインストールについてです。
Sass とは
Syntactically Awesome Style Sheets の略です。 効率的にCSS を書ける言語です。 CSSプリプロセッサ や CSSメタ言語とも呼ばれる。
ファイル形式は以下の2種類がある。
上記のファイルをRuby でコンパイルして、CSSファイルを生成します。 そのため、Ruby をインストールする必要があります。
Ruby のインストール
Windowsの場合、下記のインストーラでインストールできます。 PATH も忘れず設定しておく。
Ruby をすでにインストールしている場合、 以下のコマンドで、gem を最新版にupdate しておく。
gem update --system
Sass のインストール
以下のコマンドでインストールできます。
gem install sass
Sass のバージョン確認
Sass を正常にインストールできたか確認するために、バージョンを確認する。 以下のコマンドで確認できる。
sass -v
以下のようにバージョンが表示される。
コンパイル方法
下記のように、sass コマンドでコンパイルできる。
sass [SASS_FILE_NAME].scss [CSS_FILE_NAME].css
スタイル変更
--style オプションで、CSSファイルのスタイルを変更できます。
nested
sass --style nested [SASS_FILE_NAME].scss [CSS_FILE_NAME].css
デフォルトのスタイルです。下記のように、ネスト構造を維持して出力されます。
Output CSS
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
expanded
sass --style expanded [SASS_FILE_NAME].scss [CSS_FILE_NAME].css
一般的なCSSファイルの形式です。基本この形式で問題無いと思います。
Output CSS
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
compact
sass --style compact [SASS_FILE_NAME].scss [CSS_FILE_NAME].css
各セレクタを1行ずつ表示します。
Output CSS
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
compressed
sass --style compressed [SASS_FILE_NAME].scss [CSS_FILE_NAME].css
1行で表示します。CSSファイルを圧縮したい場合に使えます。
Output CSS
#main{color:#fff;background-color:#000}#main p{width:10em}
自動コンパイル
SASSファイルが編集されたら、自動でコンパイルをして、CSSファイルを生成するといったこともできます。 --watch オプションを使います。
sass --style expanded --watch [SASS_FOLDER_NAME]:[CSS_FOLDER_NAME]
まとめ
Sassでは、CSSの構造がわかりやくなったり、自動コンパイル機能もあったりとメリットがあるので、 これからCSSを書くときは、Sassで書いて問題無いかと思います。
次回からSassの基本的な機能であるネスト構造、演算、変数などの書き方をまとめる予定です。
