Webサイト制作本を何冊か読み、『先ほどのCSSをコピペして〜』という記述に若干の反発を感じ始めた頃、Sassの存在を知った。
Sassを使うと一般的なプログラミング言語のような分岐処理、繰り返し処理、演算などを使ってCSSを書くことができる。念願の脱コピペ。やっぱりみんな考えることは一緒だよね…
- インストールするもの
- npmの意義
- Dart Sassをコンパイルするまでの道のり
- Sassを使う環境（npmパッケージ）作成の自動化
- 初期設定
- 実行方法
- 自動化シェルスクリプトMySassCreate.sh全文
- 作成した自動化ツールの使い方
- VScodeで簡単にパッケージ作成＆Sassコンパイルできるようにする
- あとがき
※Compassの使用方針について
Compassのサポートは2016年に終了しているので、今から使い始めるのは推奨されていない。
この記事では、基本的に雛形作成（ディレクトリの整理整頓）のためだけにCompassを利用し、Compassを使わない場合にも似たようなディレクトリ構成が用意されるようにコードの修正点を明記していく。
Sassのコンパイルには、速度が遅いCompassコマンドは使用せず、これからも新機能が増築されていく最新のDart Sassを用いる。
しかし、どんどん新たなツールが生み出されているとはいえ、CSSスプライト作成機能など、未だCompassにしかない機能もいくつかあるらしい。そんなわけで、いつでもCompassも使えるように環境だけは残しておくことにする。
インストールするもの
- Visual Studio Code（この記事では必須）
-
コードを編集するためのテキストエディタ。テキストエディタとは名ばかりで、実際のところこれ一つでなんでもできる統合開発環境。
普通、統合開発環境といえば各言語専用だが、VScodeは本当になんでもできる。今のところ、C, C++, C#, Python, JavaScript, Ruby, HTML, CSS, Sass(Scss), LaTeX…などあらゆる言語をここで編集し、実行できている。
適当にググってカスタマイズしてほしい。 - node.js（この記事では必須）
-
node.jsをインストールすると使えるようになるnpmコマンドがこの記事では（というかいろいろな場面で）必須になる。
インストール方法はOSによって異なるようなので、ググって…
Dart SassやAutoprefixerはPC本体には格納せず、npmコマンドでその都度ローカルインストール（自分で作ったSassコードなどと一緒に共有できるように作業ディレクトリにインストール）するので、Compassと共存させない場合はこれ以上のインストール作業は必要ない。 - Ruby（Compassと共存させる場合）
-
Sassコードをコンパイル（ブラウザが認識可能なCSSに変換）するために必要。
Macは最初から入っているのでスルー。Windowsの方は申し訳ないがググって… - Sass（Compassと共存させる場合）
-
CSSをプログラミング言語のように効率的に書ける言語。
黒い画面からgem install sassでインストールできるはず。Macの方はsudoを先頭につけて。 - compass（Compassと共存させる場合）
-
Sassで使える便利グッズ集（Sassのミックスインや関数をライブラリ化したもの）。Sassのコンパイラとしても使える。
黒い画面からgem install compassでインストールできるはず。Macの方はsudoを先頭につけて。 - autoprefixer-rails（Compassと共存させる場合）
-
CSSベンダープレフィックス（ブラウザごとの表示の差異をなくすために必要なコード）を自動で追加してくれるツール。
黒い画面からgem install autoprefixer-railsでインストールできるはず。Macの方はsudoを先頭につけて。 - csso-rails（Compassと共存させる場合）
-
CSS縮小化ツール。別に入れなくてもよさそうだけど一応…
黒い画面からgem install csso-railsでインストールできるはず。Macの方はsudoを先頭につけて。
npmの意義
npmでは一つのアプリケーションを構成するソースファイルetc.を集めたフォルダをパッケージという。
ここではあえてソースファイルetc.と書いた。
npmの凄いところは、自分で書いたソースファイルだけでなく、それをコンパイルするコンパイラなども含めて一つのアプリケーションとしてまとめられるところだ。
例えば、作ったアプリケーションを人に提供するとき、中身がHTML, CSS, Javascriptのみであれば、相手のPCでもすぐにブラウザで実行できるだろう。
しかし、TypeScriptで書かれたファイルなどは、JavaScriptへコンパイルしなければ実行できない。相手にわざわざ『TypeScriptのコンパイラをインストールしておいてね』と伝えなくてはならない。これは面倒くさい。
そこでnpmが活躍する。npmでは、ローカルインストールという機能によって、コンパイラなどを好きなディレクトリにインストールすることができる。
アプリケーションをコンパイラとセットで相手に渡せば、相手の環境にかかわらずそれを実行できる。
また、コンパイルのためのコマンドは、オプション指定などで長くなることも多い。npmでは、それらのコマンドを短いコマンドに置き換えられるように、そのパッケージ専用の独自のコマンドを設定することができる。
これから行う工程の目的はこれくらいで理解できるはず。もっと詳しく学びたい方にはこちらの記事をお勧めしておく。（まだ私も読んでいる途中）
Dart Sassをコンパイルするまでの道のり
さて、新しいnpmパッケージを作成してSassをコンパイルするまでの道のりは、結構面倒なものである。
これに加えて、パッケージ内で、拡張子が.scssやsassのファイルはsassフォルダに収納し、それをコンパイルして得られる拡張子が.cssのファイルはcssフォルダに吐き出されるように設定したい。
（これはcompassプロジェクトとして作成した雛形を少し書き換えてそれをnpmパッケージとして登録すれば容易に実現できるが、compassを使わない方法も紹介する。）
また、CSSベンダープレフィックス（ブラウザごとの表示の差異を埋めるための追加コード）を自動で書き加えるためのツールを導入した方が良い。
これらの作業を、新たなディレクトリでSassを書くたびに行うのか？
…それは面倒くさすぎるので、自動化ツールを作りました。
Sassを使う環境（npmパッケージ）作成の自動化
初期設定
下のMySassCreate.shとMyConfig.rbを同じディレクトリにコピーしてね。
参考までに、私はホームディレクトリ/Users/tomixyにMyShellScriptというフォルダを作って、その中にMySassCreate.shとMyConfig.rbを置いている。
置き場所に応じて、以降登場する/Users/tomixy/MyShellScript/をそのディレクトリ名に書き換えてね。
macの方はchmod u+x /Users/tomixy/MyShellScript/MySassCreate.shを実行するのを忘れずに。これを実行しないとMySassCreate.shは動きません。
実行方法
- 黒い画面を開く
- Windowsなら
bashコマンドでbashを起動 - パッケージ（作業ディレクトリ）を作りたい場所に
cdコマンドで移動 /Users/tomixy/MyShellScript/MySassCreate.sh パッケージ名を実行
すると、次のようなフォルダが生成される。
自動化シェルスクリプトMySassCreate.sh全文
zshでしか動作確認していないが、bashでも使えるはず。（というかそもそもbashのためのコード）
windowsの方は…そうだなあ。私はwindows時代、この記事を見ながらbashを導入した気がする。
あ、そうだ忘れてた…jqをインストールしておかないと動かないので注意。
macならsudo brew install jqでインストールできるけど…OSによって違うのでjq インストール OS名と検索。
MySassCreate.sh
#!/bin/sh
PROJECT=$1
compass create $PROJECT # compassを使わない場合はコメントアウト
# mkdir $PROJECT # compassを使わない場合はコメントイン
cd $PROJECT
# mkdir sass # compassを使わない場合はコメントイン
mkdir css
# compassを使わない場合は下の5行をコメントアウト
cd stylesheets
mv *.css ../css
cd ..
rm -d stylesheets
cp -f /Users/tomixy/MyShellScript/MyConfig.rb config.rb
npm init -y
npm install sass fibers --save-dev
npm install postcss postcss-cli autoprefixer --save-dev
cat package.json|jq '.scripts += {"start": "sass sas$FILENAMEscss:css/$FILENAME.css --style expanded --watch | postcs--useautoprefixer -b \"last 10 versions\" css/$FILENAME.css -css$FILENAME.css "}' > package.txt
cat package.txt > package.json
rm -f package.txt細かく解説
※ここからしばらくはコードの解説なので、早く実行したい人はここに飛んでね
シェバン
MySassCreate.shの一部
#!/bin/sh『これはbashスクリプトですよ〜』とPCに宣言する部分。この記述のあるファイル名を黒い画面で入力＋Enterすると、PCは自動的にbashでこのスクリプトを実行しようとする。
もしzshで実行したのなら、この部分は『これはbashスクリプトですよ〜、でもあなたはzshみたいね…まあいいわ、うまくやってあげる。』とPCに呼びかける意味合いになる。 Z ShellのWikiより、
zshを/bin/shとして実行したとき、Bourne Shellの振りをするようにできる。
bashはBourne Shell、zshはZ Shellの略らしいよ。
しかしシェルとはいえ、Power ShellではMySassCreate.shは実行できないと思われる。構文が結構違うらしい。
コマンドライン引数の取得
MySassCreate.shの一部
PROJECT=$1/Users/tomixy/MyShellScript/MySassCreate.sh パッケージ名としてこのシェルスクリプトを実行するわけだが、このとき与えたパッケージ名が$1に格納されている。
この定数を、これからはPROJECTと呼ぶよ〜という意味。
不思議なことに、PROJECT = $1としてはダメらしい。=の左右にスペースを空けてはいけません。
compassプロジェクト（npmパッケージとなるフォルダ）の作成
MySassCreate.shの一部
compass create compass create $PROJECT # compassを使わない場合はコメントアウト
# mkdir $PROJECT # compassを使わない場合はコメントインcompass create フォルダ名で、指定したフォルダ内をSass作業用に整理してくれる。具体的には、次のような中身になる。
compass create sampleの実行例
私も詳しくは知らないが、
- ie.css
- Internet Exprorer対応のCSSを書くための雛形
- print.css
- 印刷用のCSSを書くための雛形
- screen.css
- 画面表示用の(つまり普通の)CSSを書くための雛形（CSSリセットの宣言つき）
- config.rb
- compassコマンドでのコンパイル用の設定を書いておくファイル
…らしい。
とはいえ、前述したようにcompassのサポートは既に終了しているので、ここで作られたie.cssを使ったところで最新のものに対応できるかはわからない。
シェルスクリプトでは、#以降は実行されない部分になる。よって、ここには何を書いても良い。
#!だけは例外なので注意。#!で始まるものはシェバンとして解釈されてしまう。
compassを使わない場合は、compass createの前に#を置く（コメントアウトする）ことでcompass createコマンドを無効化にする。
また、その場合はcompassが作るはずだったフォルダを手動で作成しなければならないため、# mkdir $PROJECTの先頭の#を取る（コメントインする）。
言い忘れていたが、シェルスクリプトでは、事前に宣言しておいた変数は$変数名で参照できる。
パッケージ内のフォルダをカスタマイズする
MySassCreate.shの一部
cd $PROJECT
# mkdir sass # compassを使わない場合はコメントイン
mkdir css
# compassを使わない場合は下の5行をコメントアウト
cd stylesheets
mv *.css ../css
cd ..
rm -d stylesheetsおそらく、今のカレントディレクトリは$PROJECTフォルダを置いた場所（つまり、$PROJECTフォルダの手前のフォルダ）になっていると思うので、cd $PROJECTでパッケージフォルダ内に移動する。
compassを使わなかった場合は、まだsassフォルダもcssフォルダも作成されていないので、mkdirコマンドで作成する。
compassで自動作成した場合は、拡張子が.cssのファイルがstylesheetsフォルダに格納されている。
わかりづらいので、stylesheetsフォルダは削除し、新規に作成したcssフォルダに中身を移すことにする。
cd stylesheets以降はこの移行作業になるので、compassを使わない場合はコメントアウトで無効化した方が良い。
cd stylesheetsでstylesheetsフォルダ内に移動し、中のファイルをcssフォルダ内に移動する。
*はワイルドカードといい、どんな文字列でもよいことを表す。つまり、*.cssは拡張子が.cssのすべてのファイルである。
../cssは、一つ前のディレクトリに戻って（stylesheetsディレクトリから出て）、その後cssディレクトリ内に入った場所を表す。
mv *.css ../css- すべてのcssファイル（
*.css）をcssディレクトリ（../css）にmoveする cd ..- cssディレクトリから出る（一つ前のディレクトリに戻る）
rm -d stylesheets- stylesheetsというディレクトリ（
-d）を削除（remove）する
compassコマンドによるコンパイルの設定をする
compass createコマンドによって作られたconfig.rbファイルの中身はデフォルトのものである。
これをカスタマイズしたものをMyConfig.rbとし、これをそっくりそのままconfig.rbにcopyする。
MySassCreate.shの一部
cp -f /Users/tomixy/MyShellScript/MyConfig.rb config.rbデフォルトのconfig.rb
require 'compass/import-once/activate'
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"compass設定ファイルの雛形のMyConfig.rb
require 'compass/import-once/activate'
# compassコマンドによるコンパイルでもベンダープレフィックスを使用するための設定
require "autoprefixer-rails"
require "csso"
on_stylesheet_saved do |file|
css = File.read(file)
File.open(file, "w") do |io|
io << AutoprefixerRails.process(css, browsers: ["> 1%", "last 2 versions", "ie 10"])
end
end
http_path = "/"
css_dir = "css" # 新規に作ったcssフォルダにcssファイルが出力されるようにする
sass_dir = "sass"
images_dir = "image"
javascripts_dir = "js"
# その他の設定
output_style = :expanded
relative_assets = true
line_comments = false
ベンダープレフィックスの設定は、このブログから丸ごとコピペした。
その他の設定については、このブログを参考に選択した。
npmパッケージを作成
MySassCreate.shの一部
npm init -yこれで$PROJECTフォルダ内にpackage.jsonファイルやnode_modulesフォルダが作成される。package-look.jsonファイルも作成されているかも。
npm initコマンドを実行すると、途中でパッケージの設定についていろいろと質問されるが、それらをすべてスキップしてデフォルト値を埋め込むために-yオプションをつけている。
Sassコンパイラなどをnpmでローカルインストール
MySassCreate.shの一部
npm install sass fibers --save-dev
npm install postcss postcss-cli autoprefixer --save-devnpm install パッケージ名- カレントディレクトリにパッケージをローカルインストールする
fibers- よくわからないが、速くインストールするために処理の仕方を変えるオプション
--save-dev- インストールしたパッケージを、package.jsonに依存パッケージ（これがないとこのアプリは動かないよ！というパッケージ）として記述するオプション。
依存パッケージがアップデートすると今まで使えていたコマンドなどが使えなくなり、コードの修正が必要になることもある。依存パッケージをpackage.jsonに書いておくと、npm側でいろいろな管理処理をしてくれるらしい。 - PostCSS
- CSSを変換するツール
- postcss-cli
- PostCSSを黒い画面で使えるようにするツール
- Autoprefixer
- PostCSSによってベンダープレフィックスを追加するツール
package.jsonの修正点
JSONは、簡単にいえば{ key : value }という形で表されたデータの集まりである。
npm init -yコマンドによりデフォルトで作成されるpackage.jsonは、次のようになっている。
デフォルトのpackage.json
{
"name": "$PROJECT",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}このファイルを自動で次のように書き換えることを目指す。（scriptsインデックスの値に"start":"コンパイルコマンド"を追加した）
修正後のpackage.json（イメージ）
{
"name": "$PROJECT",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" &exit 1",
"start":"コンパイルコマンド"
},
"keywords": [],
"author": "",
"license": "ISC"
}コンパイルとベンダープレフィックス付加を一気に行うコマンドを作成
コンパイルコマンドとだけ示した部分には、次のコードが入る。
（$filenameは、コンパイルコマンド実行時に渡す引数）
sass sass/$FILENAME.scss:css/$FILENAME.css --style expanded --watch | postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.csssassコマンドについて
sass- 拡張子が.scss、.sassのファイルをコンパイル（.cssファイルに変換）するコマンド
sass sass/$FILENAME.scss:css/$FILENAME.csssass コンパイルするファイル:コンパイル後のファイル--style expanded- コンパイル後のCSSファイルの書式をexpanded（わかりやすいブログはこちら）に設定
--watch- 以後、黒い画面を開いている間は保存する度にコンパイルを実行してCSSファイルを更新する
postcssコマンドについて
postcss ファイル名.css- 引数として指定したCSSファイルを解析
--use autoprefixer- postcssでautoprefixerを使うオプション
-b "last 10 versions"- 10バージョン前のブラウザまで対応
-o ファイル名- 指定したファイルに改変後のCSSを出力
シェルスクリプトにおけるパイプ|
コマンドA | コマンドB- コマンドAを実行し、その標準出力をコマンドBの引数としてコマンドBを実行
- 標準出力
- 黒い画面に吐き出されたテキストのこと
コマンドAがファイルの中身を黒い画面に表示するというものなら、表示されたファイルの中身をコマンドBで加工するということになる。
ただし、sassコマンドは.cssファイルを作成するだけで、黒い画面には何も表示しない。このままではpostcssの引数は空であり、エラーになってしまうので、postcssにはcss/$FILENAME.cssという引数をわざわざ渡している。
コマンドBにあたる部分である次のコード
postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.cssを解体すると、コマンド本体がpostcss、引数がcss/$FILENAME.css、オプションが--use autoprefixerと-b \"last 10 versions\"と-o css/$FILENAME.cssということになる。
このように、コマンドAが表示系のコマンドではなく、コマンドBに明示的に引数を渡している場合、パイプ|はただ単にコマンドAを実行した後にコマンドBを実行するという意味の記号として使われている。
コマンドを書き加えたjsonテキストを一旦package.txtに吐き出す
MySassCreate.shの一部
cat package.json|jq '.scripts += {"start": "sass sass/$FILENAME.scss:css/$FILENAME.css --style expanded --watch | postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.css "}' > package.txtもっとわかりやすく表すと、
MySassCreate.shの一部
cat package.json | jq '.scripts += {"start": " さっきのコマンド "}' > package.txtcat ファイル名
ファイルの中身を黒い画面に表示する
表示系コマンド > ファイル- コマンドの結果を黒い画面に表示するのではなく、ファイルに書き出す
jq '処理' JSON形式のファイル- JSON形式のファイルの中身を取得し、指定された処理をして、黒い画面に表示
.KEY- インデックスがKEYである要素{ "KEY" : "value" }
.KEY += { ITEM }- インデックスがKEYである要素{ "KEY" : value }のvalueの部分にITEMを追加して、要素全体を書き換える
jqコマンドの引数は一見存在しないかのように見える。
しかし、catが表示コマンドであるので、catで表示したファイルの中身をそのままjqコマンドに渡していることになる。
引数として渡されたpackage.jsonのデータを、jqコマンドで処理する。
jq '.scripts += {"start": " コンパイルコマンド "}' package.json > package.txtでも.jsonファイルは正しく作成されるが、コンパイルコマンドの実行時になぜかコンパイル不良が頻出するので、没とした。
おそらくテキストをそのままjqで処理させるのではなく、catコマンドでテキストをリスト化してからjqで処理させた方がいいのだろう。
どちらにしてもシェルスクリプトは原因不明の不具合が日常茶飯事らしいので、スマートなコードを目指すよりも経験的にうまくいく方法をとった方がよさそう。
jq '.scripts += {"start": ""sass sass/$FILENAME.scss:css/$FILENAME.css --style expanded --watch | postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.css"}'というコマンドによって、インデックスがscriptsである要素は次のように変わる。
BEFORE
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}AFTER
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"sass sass/$FILENAME.scss:css/$FILENAMEcss --style expanded --watch | postcss --useautoprefixer -b \"last 10 versions\" css$FILENAME.css -o css/$FILENAME.css "
}そして、上のようにscriptsの値を書き換えたものを、本来なら黒い画面に表示するわけだが、代わりに> packge.txtによってpackage.txtファイルに書き出すことになる。
最初からpackage.jsonに吐き出せばいいのでは？と思うかもしれないが、そうするとpackage.jsonの中身は空になってしまう。この記事に書かれてあるように、直接package.jsonに上書きするのは原理的に不可能なようだ。
package.txtの中身
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "sass sass/$FILENAME.scss:css/$FILENAME.css --style expanded --watch | postcss --use autoprefixer -b \"last 10 versions\" css/$FILENAME.css -o css/$FILENAME.css "
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.5",
"fibers": "^5.0.0",
"postcss": "^8.2.8",
"postcss-cli": "^8.3.1",
"sass": "^1.32.8"}
}
}package.txtの中身をpackage.jsonにコピーする
MySassCreate.shの一部
cat package.txt > package.json
rm -f package.txtcat package.txt > package.jsonによって、package.txtの中身を黒い画面に表示する代わりに、package.jsonに吐き出す。
このとき、元々のpackage.jsonの内容は消去され、完全に上書きされる。
一時的なデータ保管用であったpackage.txtはもう不要なので、rm -f package.txtで削除する。
『削除していいのですか？』的な確認メッセージが出ると、それに回答する手間が生じるので、確認メッセージを表示しないために-fオプションをつけておく。
作成した自動化ツールの使い方
初期設定が済んでいることを前提で話を進めます。
あと、VScodeユーザーならこの章は読むだけ無駄です。ここに進むことをおすすめします。
SassやCSSを作成するフォルダの作成
実行方法に書かれてある通りなので略。
Sassを書く
さっき作ったフォルダの中の、sassフォルダの中にオリジナルの.scssファイル（または.sassファイル）を追加していってね
Sassのコンパイル
cdコマンドでsassファイルの中へ移動FILENAME=コンパイルしたいファイル名 npm run startコマンドを実行
startというのがpackage.jsonで定義したコンパイルコマンドだが、このコマンドに直接引数を渡すことは不可能なので、FILENAMEという定数を事前に定義して、それをコマンド内で参照する手段をとっている。
cssフォルダを覗いてみると、コンパイルしたかったファイルと同名の.cssファイル（と.css.mapファイル）が作成されているはず。ベンダープレフィックスも自動で追加されています!!
なお、このコマンドの実行以降は、sassファイルをいじって再保存したり、新たなsassファイルを作って保存したりすると、勝手にコンパイルされてcssフォルダ内が更新されていくよ。黒い画面を閉じない限りね!!
…って、これだとまだ面倒臭いじゃん
…と思いませんでした？
VScodeユーザーなら、ワンクリックでできるようになります!!
VScodeで簡単にパッケージ作成＆Sassコンパイルできるようにする
初期設定
task.jsonを開く
shift ctrl P（macならshift(⬆️) command P）taskと入力ユーザータスクを開くをクリック
開かれたtask.jsonに次の内容をコピペ
task.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Sass new project create",
"type": "shell",
"command": "/Users/tomixy/MyShellScript/MySassCreate.sh",
"args": ["${input:SassProjectName}"],
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
},
{
"label": "Sass compile & watch start",
"type": "shell",
"command": "cd ${fileDirname} && cd .. && FILENAME=${fileBasenameNoExtension} npm run start",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
}
],
"inputs": [
{
"id": "SassProjectName", // ${input:***}で指定したID
"description": "Sass new project name:", // 入力説明文
"default": "sample", // デフォルト入力値
"type": "promptString" // 入力タイプ
}
],
}使い方
SassやCSSを作成するフォルダの作成
shift ctrl B（macならshift(⬆️) command B）Sass new project createをクリック- 作成したいフォルダ名を入力（デフォルトではsample）
Sassを書く
さっき作ったフォルダの中の、sassフォルダの中にオリジナルの.scssファイル（または.sassファイル）を追加していってね
Sassのコンパイル
shift ctrl B（macならshift(⬆️) command B）Sass compile & watch startをクリック
cssフォルダを覗いてみると、コンパイルしたかったファイルと同名の.cssファイル（と.css.mapファイル）が作成されているはず。ベンダープレフィックスも自動で追加されています!!
これ以降はsassファイルをいじって再保存したり、新たなsassファイルを作って保存したりすると、勝手にコンパイルされてcssフォルダ内が更新されていくよ。
あとがき
この自動化を実現するために初めてきちんとシェルスクリプトを勉強したので、ほぼほぼシェルスクリプト文法のアウトプットブログになってしまった。
実は、ブログに載せるために何度もテストしていく中で、MySassCreate.shに重大な欠陥があることに気がついた。もちろん修正済みのものを掲載している。ブログにまとめること自体がデバッグ作業。 それにしても、その欠陥というものは他の言語であれば即エラーを吐き出すようなヤバいものだった。あんなコードで動いてしまうシェルスクリプトって怖い。
実を言うとSassの勉強はまだしていないので、これからいろいろコンパイルしていく中でエラーが出る可能性も…そうしたらまたこの記事を修正しよう。安定して動作できることがある程度確認できたらGitHubにも載せる。
task.jsonの書き方についてもいつか追記するかも。とりあえず疲れたからこれでおしまい。
