近頃、Webサイト制作をしているとレスポンシブ要素を含めた場合に、CSSファイルが1000行を超えてしまうことが多々あるので（後で見たときに、わかりやすいよう省略形などは使わない主義）、SASSと呼ばれるCSS拡張言語を使ってみたのだが、かなり記述量を減らせることが出来たので今後も使っていくことにしました。
この記事では、SASSの一種である”Dart Sass”をインストールする方法とかんたんな記述ルールについてまとめているので、将来ど忘れしたときにこの記事を読めば思い出せるようなことを完結に書いていく。
Node.jsのインストール
Node.jsの公式サイトにアクセスして、「最新版ではなく、推奨版」をインストールする。Node.jsをインストールすると、Javascriptライブラリを一括管理できる”npm”コマンドも一緒にインストールされる。
プロジェクトディレクトリの作成
サーバーから見た、パブリックディレクトリを作成する。その後、CLIで作成したディレクトリに移動して、”npm”コマンドを以下のオプションで実行する。
npm init -ySASSのインストール
ここまでの作業で、ディレクトリ内に「”node_modules“ディレクトリ・”package.json“ファイル・”package-lock.json“ファイル」が作成されています。次にSASSコンパイラである”Dart SASS”をインストールするため、もう一度”npm”コマンドを実行します。
npm install sassSASSコマンドの編集
遂に、SASSコマンドのインストールが完了しました。SASSコマンドは、”SASS(SCSS)”で書かれたファイルを”CSS”構文にコンパイルして出力します。では、コンパイル前のファイルがあるディレクトリとコンパイル後にファイルを出力するディレクトリを、指定してあげましょう。SASSコマンドは実行時にオプションが必要ですので、SASSコマンド実行時に自動的にオプションを指定するエイリアス（別名）を指定しておくと便利です。
sass --color --source-map-urls=relative stylesheet/scss/:css/ --watchこれでSASSコマンド実行時に、自動的にオプションを指定している方のSASSコマンドのエイリアス（別名）の方を実行するようになります。
ちなみに、--watchオプションを指定すると止めるまでSASSコマンドが実行中になるようになります。したがって、SASS（SCSS）ファイルが更新・保存されるたびにCSSファイルが更新されるようになります。
SASSコマンドを実行するCLIをひとつ用意（起動）しておいて作業すれば、以前のCSSを用いたやり方と同じように出来るので便利です。
