戻る
■動作確認
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(選択)