Sassの個人学習用備忘録です。復習したい箇所を中心に記述しているので端折っている部分もございます故。

【使用するSassパッケージ】
○ : Dart Sass =　パッケージ名sass
× : node Sass =　パッケージ名node-sass

下記理由のためDart Sassを採用しております。

@rithmetyさんコメントより(ありがとうございます)
node-sass の公式より引用（ google 翻訳）
警告: LibSass と NodeSass は非推奨です。これらは無期限にメンテナンスされ続けますが、追加機能を追加したり、新しい css または Sass 機能との互換性を追加したりする予定はありません。それをまだ使用しているプロジェクトは、 DartSass に移動する必要があります。
https://sass-lang.com/blog/libsass-is-deprecated
https://github.com/sass/node-sass#node-sass

下準備

Sassを使うプロジェクトディレクトリに移動
node -vとnpm -vでバージョン表示されることを確認

※ Node.jsとnpmのインストールがまだの方は他の方の記事ですがこちらを参考に進めていただくとスムーズかもしれません。

1.パッケージを管理

npm init

package.jsonファイルとpackage-lock.jsonファイルとnode_modulesディレクトリの3つが自動的に作成される。

{
  "name": "starter",
  "version": "1.0.0",
  "description": "Landing Page for sass",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}

2.Sassのインストール

npm install sass fibers --save-dev

先ほど作成したpackage.jsonファイルの下にインストールされたパッケージが追記される。

fibersはコンパイル速度を向上させられるらしい。

{
  "name": "starter",
  "version": "1.0.0",
  "description": "Landing Page for sass",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "fibers": "^5.0.0",
    "sass": "^1.29.0"
}

パッケージを追加削除アップデートする際はpackage.jsonファイルを直接編集せず、npmコマンドを使用して行う。
例えば、別のプロジェクトでも同じ環境を再現したいというときは、package.jsonファイル置いた上でnpm installを実行するとnode_modulesディレクトリにpackage.jsonファイルで記載されいているパッケージが自動的にインストールされる。

nｐｍコマンドについてのメモ

//インストール
npm install (パッケージ名) --save
//アンインストール
npm uninstall (パッケージ名) --save

オプションについて

--save
package.jsonファイルにパッケージ情報がdependencyとしてとして追記される

-dev
Sassなど、開発やテストのみで必要な場合、ローカルインストール(devDependencies)
※jqueryなど実行に必要なパッケージの場合はつけなくてOK(dependencies)

参考記事
【初心者向け】NPMとpackage.jsonを概念的に理解する

3.コンパイル

Sassファイル作成

sassファイルとコンパイル先のcssを作成(cssファイル内の記述は空でOK)
例ですがsass/main.scssと作りました。
style.css.mapはコンパイル後に自動的に作成されるため無視してOKです。

実行scriptを追記

package.jsonファイルのscript内に以下のように記述
"(コマンド名)": "(パッケージ名) (sassファイルへのパス) (cssファイルへのパス) --watch"

--watchオプションをつけておくとsassファイルが変更/保存されるたびに自動的にコンパイルしてくれるので楽です。
ターミナルを閉じると自動コンパイルのプロセスが終わってしまうので閉じないこと。
ターミナル操作が必要であれば別タブで行いましょう。

script文追記

  "scripts": {
    "compile:sass": "sass sass/main.scss css/style.css --watch"
  },

コンパイル開始

npm run compile:sass

> starter@1.0.0 compile:sass /Users/nakamurashun/Desktop/private/study/front/css/Sass/udemy/advanced-css-course-master/Natours/starter
> sass sass/main.scss css/style.css --watch

Compiled sass/main.scss to css/style.css.
Sass is watching for changes. Press Ctrl-C to stop.

ちなみにVScodeのliveServerという拡張機能を使うとファイルの編集内容がブラウザにリアルタイムで反映されるので、コンパイルと同時にブラウザにも変更内容が反映されてより便利です。

コンパイルエラーのとき

このようにどこが間違っているかターミナル上で指摘してくれます。
そのため、VScodeでターミナルを開けるのでSass編集中は邪魔にならない程度に開いておくと良いかもしれません。

続き

自動コンパイルだけでなく、コンパイル時にベンダープレフィックスや圧縮を一緒にしてくれるための方法です。
開発用と本番用で手順を記載していますので参考になれば幸いです。

Sassコンパイル(ベンダープレフィックス/圧縮編)