Sass の使い方（その１：概要）

Sass には２つのファイル形式があります。 .scss と .sass です。 ファイル形式が２つあるので、混乱しそうになりますが、この２つは少しだけファイルの書き方が異なるだけで、内容はほぼ同じものになります。

.scss は { } と ; を使用した書き方になります。一方、.sass はインデントによる書き方になります。

どちらを使うかは好みの問題だったりもしますが、わかりやすさから .scss が使われることが多いです。

nav {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		display: inline-block;
	}

	a {
		display: block;
		padding: 6px 12px;
		text-decoration: none;
	}
}

nav
	ul
		margin: 0
		padding: 0
		list-style: none


	li
		display: inline-block


	a
		display: block
		padding: 6px 12px
		text-decoration: none

npm を使う場合、下記のコマンドを実行するだけでインストール完了です。簡単ですね。

npm install sass

package.json の devDependencies に追加する場合は、--save-dev オプションを忘れずに付けましょう。

npm install --save-dev sass

Sass をインストールすると、sass コマンドが使えるようになっています。 下記のコマンドを実行してバージョン番号が表示されれば、ちゃんとインストールできています。

なお、コマンドは "./node_modules/.bin" にインストールされます。 コマンドが見つからない場合は、"./node_modules/.bin" に PATH を通しておくか、 相対パスで "./node_modules/.bin/sass" と指定するか、 もしくは npx コマンドを使用するなどの対応を行ってください。 この記事では、説明の簡略化のために "./node_modules/.bin" に PATH を通してあることを前提として説明していきます。

sass --version

sass コマンドの詳しい使い方が知りたい場合は、ヘルプを表示してみましょう。

sass --help

1つのファイルを変換する場合は、変換元のファイル名と、変換先のファイル名を指定するだけです。

sass input.scss output.css

複数のファイルを変換する場合は、変換元のディレクトリと、変換先のディレクトリを :（コロン）で区切って指定します。 下記の例では、"assets/sass" ディレクトリにある全てのファイルを変換し、その変換結果を "public/css" ディレクトリに出力します。

sass assets/sass:public/css

ファイルを変更するたびに変換する必要があるわけですが、毎回毎回ファイルを変更するたびに変換するのはとても面倒です。 そこで、ファイルの変更を Sass が監視し、ファイルに変更があった場合に自動で変換してくれるようになるオプション --watch があります。 このオプションを付けて Sass を実行すると、そのファイルに何か変更があった場合、自動で変換されるようになります。 監視をやめる場合は、Ctrl + C を押せば終了できます。

sass --watch assets/sass:public/css

変換結果の .css ファイルから不要なインデントやコメントを取り除いて、ファイルサイズを最小化（minify）したいと思うと思います。 --style オプションに、compressed を指定すると、CSSを minify して出力してくれます。 別の npm のパッケージ（例えば、clean-css など）をインストールしなくても、Sass だけで minify できるので便利です。

sass --style=compressed assets/sass:public/css

Sass で変換した際、変換結果である .css のほかに、ソースマップである .css.map ファイルもデフォルトで出力されます。 ソースマップというのは、変換結果の .css から、変換元の .scss/.sass ファイルのどの個所から変換されたかを、逆に辿るためのものですが、不要な場合もあると思います。 ソースマップを出力しないようにする場合は、--no-source-map オプションを付けます。

sass --no-source-map assets/sass:public/css