Sass環境設定（メモ）
Sassをやってみよう！
書き方はCSSがわかればいけそう、でも環境設定が面倒らしい・・・ということでなかなか手付かずだったけど、ちょっと暇が出来たので触ってみました。ググると色々記事があったので、参考にしながら進めました。
わたしは下記の環境で実行しました。
macOS High Sierra バージョン 10.13.6
手順
Sassを使えるようにするためには、下記の手順が必要です。
1. Rubyインストール（macでは標準搭載なので省略）
2. Sassインストール（ターミナルで操作）
参考URL: https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe
ちなみに、私はSassインストールでさっそく躓きました。参考URLに沿って、
gem install sass
と入力すると、
You don't have write permissions for the /Library/Ruby/Gems/2.3.0 directory.
と言われてしまいました。ただ、調べたところ、”sudo”の権限を使用すればいけそうだったので、
sudo gem install sass
として、進めました。
上記が終わったら、最低限必要な準備は完了です。次に、コンパイルの方法を次の３つから1つ選びます。
A. GUIソフト（Koala、preprosなど）を使う
B. VSCodeを使う
C. ターミナルで直接コンパイルする
このうち、わたしはB（VSCodeを使う）とC（ターミナルで直接コンパイルする）を試しました。
GUIソフトを使わなかった理由は、ネットが遅すぎてダウンロード出来なかったからです。残念すぎる。
VSCodeを使う
既にVSCodeをインストール済だったので、この方法が一番簡単でした。方法としては、Easy Sassという拡張機能をインストールして有効化するだけです。ファイルをtest.scssという拡張子で保存すると、同じフォルダ内に自動で
test.css
test.min.css
という２種類のファイルが生成されました。
参考URL: https://kukka.me/vsc-sass2/
ターミナルで直接コンパイルする
こちらは、作成したscssファイルをターミナルで直接コンパイルする方法です。方法としては、細かく分けると下記の２つです。
1. 手動で必要に応じてコンパイルする
下記のコマンドを入力します。
sass test.sass:test.css
（testの部分を必要に応じて書き換えてください）
Sassインストール時に”sudo”の権限を使用している場合は、
sudo sass test.sass:test.css
とします。
2. ファイルが更新されたときに内容をwatchして、自動でコンパイルする。
下記のコマンドを入力します。
sass --watch test.sass:test.css
Sassインストール時に”sudo”の権限を使用している場合は、
sudo sass --watch test.sass:test.css
とします。
*ターミナルを閉じるとwatchしているプロセスが強制終了されるようなので、watch実行中はターミナルを開いたままにします。Ctrl-Cでwatchを中止出来ます。
参考URL:
https://qiita.com/mitch0807/items/9682d56b6f62c3607ad6
sudoって何？
sudoは、UNIXおよびUnix系オペレーティングシステムのプログラムの1つで、ユーザーが別のユーザーの権限レベルでプログラムを実行するためのコマンドである。一般的に、ユーザーがスーパーユーザーの特権レベルを利用する際に用いられることが多い。
（Wikipediaより）
今回のケースでは、Sassインストール時に「権限がないよー」と言われちゃったので特権を使ってインストールする
→特権を使ってインストールしたので、以後のコマンド操作の際もsudoと入力する必要が出てきた。
という感じかなと。
VSCode使えばその辺を特に気にせず作業進められるので、私はVSCode推しです。
以上です。
有識者からのツッコミは大歓迎なので、お気付きの点があれば教えてください！
では。
この記事が気に入ったらサポートをしてみませんか？