Memo

動作確認

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（選択）
Memo

Advertisement
