SASS導入手順　2021 （windows対応）

#1.SASS導入のための基本事項
SASSはRubyを使って動いているらしいので、Rubyのインストールが必須条件となる模様です。

尚、Macの場合はRubyがデフォルトでインストールされているらしく、この操作が不要（らしい）
筆者はWindowsなので、Rubyのインストールから行いました。

---
<b>余談：</b>
・Rubyインストール前にコマンドプロンプトから、[npm install sass]打ったら、権限が拒否されたみたいなことを書かれて失敗しました。
・SASSのRubyページ？へ飛ぶと、Ruby版SASSの開発終了みたいなことが告知されており、今後はRubyで動かすものではなくなるのかもしれません。

---

#2.Rubyインストール
SASS(SCSS)はRubyで動いているらしいので、Rubyのインストールからとなる。
<b>https://rubyinstaller.org/ に行き、ページ上部のでかい[Download]ボタンをクリック。</b>
![qiita3173.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990851/cfec322a-c177-f442-939d-3cec36448f61.jpeg)

---

<b>リストの中の推奨されているリンク（左に矢印が付いている）をクリック</b>
![qiita3172.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990851/f27a3e9f-60e0-d886-4a0f-ea28a45ce0f4.jpeg)
---

（筆者の場合は推奨されたRuby+Devkit 2.7.2-1(x64)をクリック）
<b>クリックすると、ブラウザからインストーラのダウンロードが始まります。</b>

<b>インストーラ内は他インストーラ等と同じように、インストール箇所やオプションの付随などを決めながら進みます。
基本的には一番最初の[_I accept_]以外は、そのまま進めばいいと思います。</b>

Rubyインストールが終わったら、`ruby -v`で確認。バージョンが帰ってきたらOK
（コマンドラインを開いたままインストールした場合は、コマンドラインを再起動しないと動かない）

```:Rubyインストール確認
ruby -v 
>ruby 2.7.2 ~~~~~~~~~~~~~~~~~~~~
```

<b><font color="red">Rubyインストール編・完。</font></b>

#3.SASSインストール
~~SASSとSCSSが未だごっちゃになってる。
おそらく、SASS,SCSSが並んで書かれるときは記法、ファイル形式での違いが語られるとき。
SASSというのはSASS,SCSS記法が動くようにするエンジンのようなものと認識している。~~

<font color="gray">要するに、SASSを書こうがSCSSを書こうが、「SASS」という仕組みはインストールしなければならない。らしい。</font>

Rubyインストールが終わっているなら、

```
gem install sass
```

でSASSをインストールできる。
npmじゃないの？と、不審に思ったが多分Rubyの仕組みなのだろう。

こちらはRubyインストールと比較してすぐ終わるので、以後はSASSを使いたいディレクトリまで移動し、普通に

```
npm install sass
```
すればいい。

<b><font color="red">SASSインストール編・完。</font></b>

#4.SASS実践
入れたなら実践せねば完了ではない、とおじいちゃんが言ってる。
ここではSCSS記法でやってみる。

CSSの場合↓

```css:style.css
#wrap {
  color: red;
}

#wrap a{
  color: blue;
}

#wrap a:before {
  content: "";
  display: block;
  width: 5px;
  height: 20px;
  background-color: yellow;
}
```

をSCSSの場合↓

```scss:style.scss
#wrap {
  color:red;
  a{
    color: blue;
    &:before{
      content: "";
      display: block;
      width: 5px;
      height: 20px;
      background-color: yellow;
    }
  }
}
```
のように書くことが出来る。分かりやすい。（例は分かりにくい）

ただ、SASS,SCSSはそのままブラウザに読み込んでも動かせない為、コンパイルが必要。
面倒と思うかもだが、これもここまで手順を踏んでインストールできていれば、

```
sass sukina.scss:sukina.css
```

のようにコマンドライン実行すれば簡単に、.scssが.cssに変換される。
この時、.cssと一緒に生成される、.css.mapファイルがあるが、使い方はよく分からぬ。chromeDevtoolsでcssを修正するときに、scss上での行位置との関連を示してくれるらしい。

#5.SASSコンパイル　オプション
前述の

```
sass style.scss:style.css
```

を実行すると、下記のようなCSSファイルが出来る。

```css:style.css
#wrap {
  color: red; }
  #wrap a {
    color: blue; }
    #wrap a:before {
      content: "";
      display: block;
      width: 5px;
      height: 20px;
      background-color: yellow; }
```

....なんかインデント変じゃね？

と、これはネストの深さ？をインデントで表している記法らしい。
まあ、確かにCSSの書き方なんて人それぞれだわ....なんて思ったがいやいや不便じゃんと結論。

安心してください。ちゃんとコンパイルオプションで書き方調節も出来ます。
`--style` オプションで実行するようです。

| Nested | Expanded | Compact | Compressed |
|:------:|:--------:|:-------:|:----------:|
| デフォルト | 綺麗  | コンパクト |圧縮|

##-0.コンパイル前SCSS

```scss:style.scss
#wrap {
    color:red;
    a{
      color: blue;
      &:before{
        content: "";
        display: block;
        width: 5px;
        height: 20px;
        background-color: yellow;
      }
    }
}
```

##-1.Nested

```:コマンドライン
sass --style=nested style.scss:style.css
```

デフォルトのコンパイルです。
従って、先ほど紹介したものと同じ記法です。


```css:出力されたCSS
#wrap {
  color: red; }
  #wrap a {
    color: blue; }
    #wrap a:before {
      content: "";
      display: block;
      width: 5px;
      height: 20px;
      background-color: yellow; }
```

##-2.Expanded

```:コマンドライン
sass --style=expanded style.scss:style.css
```

綺麗めなコンパイルです。
筆者はいつもこの記法で書いていたので、しばらくはこれを使おうと思います。

```css:出力されたCSS
#wrap {
  color: red;
}
#wrap a {
  color: blue;
}
#wrap a:before {
  content: "";
  display: block;
  width: 5px;
  height: 20px;
  background-color: yellow;
}
```

##-3.Compact

```:コマンドライン
sass --style=compact style.scss:style.css
```

文字通りコンパクトなコンパイル。
セレクタごとに改行が入るようです。

```css:出力されたCSS
#wrap { color: red; }
#wrap a { color: blue; }
#wrap a:before { content: ""; display: block; width: 5px; height: 20px; background-color: yellow; }
```

##-4.Compressed

```:コマンドライン
sass --style=compact style.scss:style.css
```

文字通り圧縮するコンパイル。
将来的に本番環境に放り込むコンパイルであればこれで良さそう。

```css:出力されたCSS
#wrap{color:red}#wrap a{color:blue}#wrap a:before{content:"";display:block;width:5px;height:20px;background-color:yellow}
```

以上。基本は四つのコンパイルオプションから選ぶ感じですね。

オプションに関してはSASS公式がページを出してくれているので読むと面白いです。
公式リンク：https://sass-lang.com/documentation/cli/ruby-sass#style

<b><font color="red">SASS実践編・完。</font></b>

#まとめ
SASS導入に関して、Windowsだったからか思ったより手間取ったのと、他サイトがちょっと分かりにくかったので自分なりにまとめてみました。参考になれば幸いです。

SASS公式的には、<b>Ruby-SASS</b> から <b>Dart-SASS</b>・<b>Lib-SASS</b>なんかに乗り換えるのをオススメしてましたが、今後どうなるんでしょうね？
気になるところですが、とりあえずSASSを使いこなすべく今日から開発に使っていこうと思います。

筆者は初学者の為、かなり雑なところが多かったと思います。もし間違った知識を書いているようなことがあれば、コメントしてくだされば幸いです。
駄文失礼しました。

参考URL様
・https://blanche-toile.com/web/windows-ruby-sass
・https://weblike-curtaincall.ssl-lolipop.jp/blog/?p=683
・https://sass-lang.com