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;
}
# wrap a{
color: blue;
}
# wrap a: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; }
#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
# 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; }
#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
綺麗めなコンパイルです。
筆者はいつもこの記法で書いていたので、しばらくはこれを使おうと思います。
# 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
文字通りコンパクトなコンパイル。
セレクタごとに改行が入るようです。
# 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
文字通り圧縮するコンパイル。
将来的に本番環境に放り込むコンパイルであればこれで良さそう。
# 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
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