導入
動作確認
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）をダウンロードし、
インストール済みの場所に上書きでインストールした。
設定もクリアされずに残っていた。