コンパイル方法

コンパイル方法

SASSファイルをCSSファイルに変換するコンパイル方法をご紹介します。

基本

SASSのコンパイルはsassコマンドを使用します。
コマンドを使用するときは、コマンドプロンプトなどを起動して入力・実行します。

構文：

							sass SASSファイルパス
						

							sass SASSファイルパス 出力CSSファイルパス
						

例：

							sass source/base.scss output/style.css
						

出力CSSファイルパスを指定しなかった場合は、SASSファイルと同じディレクトリに拡張子が.cssで出力されます。

自動コンパイル

--watchというオプションを付けることで、SASSファイルを更新するたびにいちいちコマンドを実行する必要がなく、指定したSASSファイルの更新を監視し、ファイルが更新されたら自動的にコンパイルを実行することができます。

例：

							sass source/base.scss output/style.css --watch
						

CSSの書式

--styleというオプションを付けることで、出力されるCSSのコード書式を指定することができます。

書式値	説明
expanded	初期値 ブロック内の宣言にインデントが付いた状態
compressed	インデント、改行、コメントアウト、半角スペース（必要なもの以外）が削除された状態

構文：

							sass SASSファイルパス 出力CSSファイルパス --style 書式
						

例：

							sass source/base.scss output/style.css --style compressed
						

マップファイル

開発ツールなどで確認するとCSSの行番号が確認できますが、ほとんどはSASSの行番号と一致しないことがあります。
そんなCSSからみたSASSの行番号を確認することができるのがマップファイルです。

通常コンパイルを行うとマップファイルが自動的に生成されます。
マップファイルと関連付けするためCSSファイルの最後の行に関連付けするマップファイルのパスが書かれています。
しかし開発中以外（公開）では必要としないため不要なファイルとコードが残ってしまいます。
そこで--no-source-mapを付けることで、マップファイルを生成しません。

例：

							sass source/base.scss output/style.css --no-source-map