■導入
※今ならGulpやWebpackからコンパイルする方がいいかも
Gulpによる構築は Gulp.txt を参照
Koala
http://koala-app.com/
Sass(SCSS)＋Koalaを使ってみよう。導入編
http://mizukazu.minibird.jp/sass-scss-koala/
フリーのSass,LessコンパイラKoala
http://blog.sou-lab.com/koala/
KoalaというSCSS（SASS）開発補助ツールを使ってWordPressテーマの開発効率を手軽にアップする方法
http://nelog.jp/wordpress-sass-compass-gui
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG
https://liginc.co.jp/web/html-css/css/56599
CSSの常識が変わる！「Compass」の基礎から応用まで！ | 株式会社LIG
https://liginc.co.jp/designer/archives/11623
■動作確認
sass-test/index.html を作成し、以下の内容を記述する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>テスト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>テスト</h1>
<p>テスト。</p>
</body>
</html>
sass-test/sass/style.scss を作成し、以下の内容を記述する
// ネストのテスト
div {
p {
font-weight: bold;
}
}
// 変数のテスト
$fontColor: #525252;
h1 {
color: $fontColor;
}
Koalaの「＋」から sass-test フォルダを登録すると、以下のファイルが作成された。
SASSファイルを編集すると、CSSファイルにも反映された。（初期設定では自動コンパイルで無いかも？後述の設定内容を確認）
他にもコンパイル対象にしたいファイルがあれば、すべて登録する（勝手に登録されるかも？）
sass-test/css/style.css
sass-test/css/style.css.map
Koalaに表示されたSCSSをクリックするとコンパイル設定が表示される。以下の設定にするか
他の人が編集していたファイルなら、その設定に合わせておくのが無難
・自動コンパイル（チェック）
・Source Map（チェック）
・アウトプットスタイル：compressed（選択）
■メモ
Sassで作成されたデータを引き継いだときに行った作業
Sassフォルダに実際にコーディングされたものがある
ディレクトリを丸ごとKoalaにドラッグ＆ドロップすると、scss/style.scssだけが一覧に表示された
scss内のファイルを編集すればcss内に反映されるようになった
（起動させてから少し待ったほうがいいかも。Koalaを閉じるとSassの変換も止まるので、ウインドウは開いたままにする）
あとはひたすらscssファイルを編集すればいい
作成されたCSSファイルに行数とパスが含まれている場合、
Koala側の各プロジェクトのコンパイル設定画面のオプションで「Line Comments」のチェックを外す
git管理する場合、scssやconfig.rbも含めて公開ディレクトリ内に置けば良さそう
「.sass-cache」を管理対象外にすれば良さそう
JavaScriptは直接編集する。画像は直接images内に配置する
■バージョンアップ
最新版のインストーラー（KoalaSetup.exe）をダウンロードし、
インストール済みの場所に上書きでインストールした
設定もクリアされずに残っていた