Sass 再入門

2021/04/23 12:00:00

CSS自体は楽しいものですが、長く運用していると、CSSファイルは巨大化し、複雑になり、メンテナンスが難しくなりがちです。 CSSファイルは誰もメンテナンスできないなんていうプロジェクトに何度か遭遇したことがあります。 巨大で複雑なCSSファイルをメンテナンスできるようにするには、どうすればよいでしょうか? そこで登場するのが、Sass です。最近の Web の開発ではよく使われていると思います。

Sass とは?

sass_thumb.png

Sass は、世界で最も成熟したCSSの拡張言語であり、CSSのプリプロセッサとして動作します。 Sass 使用すると、CSSにはまだ存在しない機能(変数、ネスト、ミックスイン、継承など)を使用できるようになり、メンテナンス性が向上します。 例えば、1つのCSSファイルを複数の小さなファイルに分割したりすることも容易になります。

.scss と .sass

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

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

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

.scss .sass
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


インストール方法

Sass のインストールには様々な方法がありますが、npm を使ってインストールするのが簡単で良いと思います。 ちなみにですが、Sass には Dart Sass、LibSass、Ruby Sass のようにいろんな実装があるのですが、npm を使ってインストールすると Dart Sass というのがインストールされます。 Dart Sass が一番進んだ実装となっているので、そういった意味でも npm でインストールすると良いと思います。

npm の使い方がわからないという方は、まずは「Node.js と npm 再入門」を参考にしてください。

npm を使って、Sass をインストールする

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

npm install sass

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

npm install --save-dev sass

インストールできたか確認する

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

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)する

変換結果の .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

npm-scripts に登録する

便利な sass コマンドですが、各種オプションや、ディレクトリ名を毎回入力するのは面倒に感じてくると思います。 そこで、よく使う sass コマンドを npm-scripts に登録しておくと、入力の手間が少なくなって便利です。

npm-scripts の使い方がわからないという方は、「Node.js と npm 再入門(その3:npm-scripts)」を参考にしてください。

package.json

{
	"name": "demo-app",
	"version": "1.0.0",
	"scripts": {
		"watch:css": "sass --watch --no-source-map assets/sass:public/css",
		"build:css": "sass --no-source-map assets/sass:public/css",
		"minify:css": "sass --style=compressed --no-source-map assets/sass:public/css"
	}
}

スクリプトを実行する

npm run watch:css

参考サイト

関連記事

前回、「Sass 再入門」の続きです。今回はファイルの書き方についてです。コメントSass でもファイルにコメントを書くことができます。単一行コメントCSSでは、単一行コメントの // は使えませんが、Sass では使用することができます。単一行コメントの内容は、CSSとして出力されません。複数行コメント複数行コメント /* */ の内容はデフォルトではCS ...
前回、「Sass 再入門(その2:ファイルの書き方)」の続きです。今回はファイル分割についてです。別のファイルを読み込む(@use)Sass で便利だなと思う機能は、複数のファイルに分割できることでしょう。ファイルが分割できることで、1つのファイルが小さくなり、メンテナンスがしやすくなります。読み込まれる側のファイルと、読み込む側のファイルで書き方のルールが ...

記事検索

アーカイブ

2021

2019

2018

2017

2016

2015

2014

2013

2012

2011

2010

RSSフィード