1.SASS導入のための基本事項

SASSはRubyを使って動いているらしいので、Rubyのインストールが必須条件となる模様です。

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

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

2.Rubyインストール

SASS(SCSS)はRubyで動いているらしいので、Rubyのインストールからとなる。
https://rubyinstaller.org/に行き、ページ上部のでかい[Download]ボタンをクリック。

リストの中の推奨されているリンク（左に矢印が付いている）をクリック

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

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

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

ruby -v 
>ruby 2.7.2 ~~~~~~~~~~~~~~~~~~~~

Rubyインストール編・完。

3.SASSインストール

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

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

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

gem install sass

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

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

npm install sass

すればいい。

SASSインストール編・完。

4.SASS実践

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

CSSの場合↓

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

を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ファイルが出来る。

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

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

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

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

-0.コンパイル前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

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

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

-2.Expanded

sass --style=expanded style.scss:style.css

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

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

-3.Compact

sass --style=compact style.scss:style.css

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

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

-4.Compressed

sass --style=compact style.scss:style.css

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

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

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

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

SASS実践編・完。

まとめ

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

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

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

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