はじめに
Bracketsの拡張機能、SASS AutoCompileを使ってみたので備忘録を残します。
OSはWindows10
Node.js及びGulpは使用していません。
SASS Autocompileの入手先
拡張機能マネージャーで検索する他、以下のサイトからも入手が可能です。
SASS Autocompile | Github
使用方法
拡張機能をインストールすると、メニューバーにSASS compilerというメニューが表示されます。
- Select Source Folder でmain.scssが置いてあるフォルダーを選択します。
- Select Destination Folder でmain.cssを選択します。ファイルが無い場合は作成されます。
- Enable AutoCompile をクリックすると準備が完了します。
ファイルを保存するたびに変更内容がmain.cssに反映されるようになります。
Node.jsやGulpがインストールされていなくても使用することができます。
注意点
- 1.で指定するフォルダーは、かならずmain.scssが存在している必要があります。
- main.scssに
@importで別のscssファイルを読み込むことで、分割されたSCSSファイルを1つのCSSにファイルにまとめることができます。 - コンパイル先のCSSファイルは任意に名前を変更することができます。
- コンパイルの設定はBracketsを起動するたびに設定をする必要があります。
以上です。
Bracketsだけでとてもかんたんにできますが、Node.jsとGulpを使ったコンパイル環境も今後構築しようと思います。
実際に試しました。
Node.jsとGulpを使ったコンパイルに比べて、やはり柔軟性が劣るという難点はあるようですね。
ディレクトリがごちゃごちゃしないのは良いところかな……