メモ > 技術 > 開発: Sass > 動作確認
■動作確認
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（選択）