Sassコンパイル(とりあえずコンパイル編)

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のインストールがまだの方は他の方の記事ですが[こちら](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)を参考に進めていただくとスムーズかもしれません。


# 1.パッケージを管理

```
npm init
```
`package.jsonファイル`と`package-lock.jsonファイル`と`node_modulesディレクトリ`の3つが自動的に作成される。
![スクリーンショット 2020-11-09 19.16.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825124/5f305725-582b-4c7c-56e6-1118ecb7d87a.png)


```
{
  "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を概念的に理解する](https://qiita.com/righteous/items/e5448cb2e7e11ab7d477#npmcli)

# 3.コンパイル

## Sassファイル作成
sassファイルとコンパイル先のcssを作成(cssファイル内の記述は空でOK)
例ですがsass/main.scssと作りました。
style.css.mapはコンパイル後に自動的に作成されるため無視してOKです。
![スクリーンショット 2020-11-10 17.30.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825124/ca32feee-21f6-4057-3148-ab7fe0000956.png)

## 実行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](https://life-care.site/programming/liveserver_install_how_to_use)という拡張機能を使うとファイルの編集内容がブラウザにリアルタイムで反映されるので、コンパイルと同時にブラウザにも変更内容が反映されてより便利です。

### コンパイルエラーのとき
![スクリーンショット 2020-11-10 17.48.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/825124/42f84005-2e56-be5a-6315-b621fc70bf34.png)
このようにどこが間違っているかターミナル上で指摘してくれます。
そのため、VScodeでターミナルを開けるのでSass編集中は邪魔にならない程度に開いておくと良いかもしれません。

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

[Sassコンパイル(ベンダープレフィックス/圧縮編)](https://qiita.com/nakamurashun0621/items/0e4907392de56ce7fea1)