前提

ちょっと CSS や HTML を書いて試したい
でもだんだん CSS の量が増えてきて「Sass/SCSS使いたいなあ…」と思い始めた

といった方向け（つまり自分向け）の記事です。

環境

yarn 1.12.3
sass 1.15.1

TL;DR

ディレクトリ構成

index.html
src
 └ main.sass
build
 └ main.css
node_modules
yarn.lock
package.json
package-lock.json

sass をインストール

$ yarn add --dev sass

ウォッチコマンドを定義

{
  "dependencies": {},
  "devDependencies": {
    "sass": "^1.15.1"
  },
  "scripts": {
    "sass-watch": "sass --watch src/main.sass build/main.css"
  }
}

package.json で定義したスクリプトを実行

$ yarn run sass-watch
yarn run v1.12.3
warning package.json: No license field
$ sass --watch src/main.sass build/main.css
Sass is watching for changes. Press Ctrl-C to stop.

備考

sass のインストールは Yarn でも npm でもどちらでも良いと思います。いずれにせよ、 .sass ファイルを更新するたびにコンパイルが走ってほしいのでウォッチコマンドを定義しておくのが吉です。
あと、npm のパッケージにありがちなんですが、だいたい -g オプションつけてグローバルでインストールしろって言ってくると思いますが、ありゃあ無視した方が良さげです。ディレクトリやプロジェクトごとに使いたいバージョンも変わってくるので、基本的には package.json 内に閉じ込めておく方が管理が楽かと思います。

参考文献

https://sass-lang.com/install
https://sass-lang.com/guide