1,281 views

この記事は最終更新から 1373日 が経過しています。

1. やりたいこと

いつもは Linux上で sassを実行しているが、たまに Windows上で実行したい時もある。

2. やってみる

(1) Rubyをインストールする。

こちらから Windows用のインストーラをダウンロードし、実行する。
https://rubyinstaller.org/downloads/

うちのWindowsパソコンの CPUは Core i7 8700 なので x64版のインストーラを使う。
今回は 2018年10月17日時点の最新版である Ruby 2.5.1-2 (x64) をダウンロードした。

(2) sassをインストールする。

コマンドプロンプトで以下を実行する。実行場所はどこでもよい。

gem install sass
sass -v
gem update sass
sass -v

(3) sassを実行する。

sassファイルの存在するディレクトリで実行してみる。
ここでは compressed指定で minifyする。

sass -t compressed style.scss:style.css

3. 応用

(1) バッチファイルで自動実行する。

Step 1: 単純に sassだけを実行する。

Sassで scssを minifyした cssファイルを作る。
この場合、scssと同じフォルダに cssファイルが生成される。

sass -t compressed style.scss:style.css

このままだと自動で mapファイルが出力される。
普段は不必要なので、mapファイルを生成しないように –sourcemap=false 指定で出力を抑制する。

sass -t compressed --sourcemap=false style.scss:style.css

Step 2: SASSを実行し、生成したcssを別フォルダに移動する。

シナリオは以下の通り。
1) Sassで scssを minifyした cssファイルを作る。
2) 出来上がった cssファイルをお隣の cssディレクトリに移動する。

＆で繋げないと１コマンド終了時にバッチ処理も終了してしまうので注意。

sass -t compressed --sourcemap=none style.scss:style.css & move style.css ../css

Step 3: 上記の Step2を複数の scssファイルに対して実行する。

シナリオは以下の通り。
1) Sassで複数の scssファイルを minifyした cssファイルを作る。
2) 出来上がった cssファイルをお隣の cssディレクトリに移動する。

バッチファイルの中で複数コマンドを並べて書けばよい。
コマンドを横につなげて長くなると見づらいので
改行する場合、行末に ^ を付けると 1行に展開して実行される。

sass -t compressed --sourcemap=none reset.scss:reset.css & ^
sass -t compressed --sourcemap=none style.scss:style.css & ^
move *.css ../css

---