VisualStudioCodeの拡張機能を使ってSass開発

Sassって規模が大きくなればなるほど効率的なのは分かっているけどコンパイルとかそのコンパイルの環境を構築するのが面倒だから導入さてれいないそうです。

でもVisualStudioCodeを使えば拡張機能で簡単にコンパイルできちゃうんです。
以下VisualStudioCodeをVSCODEと呼びます。

VSCODEに拡張機能を追加

この2つの拡張機能を追加します。

VSCODEの拡張機能動作確認

VSCODEで簡単なHTMLを作ります。
その時の注意ですが、VSCODEで開発環境のフォルダを開くことです。
ディスクトップに「samples」を作ってこれをVSCODEで開きます。

当然ですが最初は何も無い状態です。

index.htmlを作ります。

簡単なHTMLを作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>VSCODEでSassをコンパイル</title>
</head>
<body>
    <div class="container">
        <h1>Sassのコンパイル</h1>
        <div class="profile">
            <h2>プロフィール</h2>
            <p>プロフィールの内容</p>
        </div>
        <div class="information">
            <h2>インフォメーション</h2>
            <p>インフォメーション内容</p>
       </div>
    </div>    
</body>
</html>

注目は「style.css」を読み込んでいます。
まだ存在しませんが。

scssを作る

「style.scss」を作ります。

.container
{
    h1
    {
        color: red;
    }
    .profile
    {
        h2
        {
            color: green;
        }
        p
        {
            color: blue;
        }
    }
    .information
    {
        h2
        {
            color: yellow;
        }
        p
        {
            color: orange;
        }
    }
}

Sassっぽいスタイルを記述します。

WatchSass

VSCODE右下に「Watch Sass」と表示されるのでこれをクリックします。

自動生成されるファイル

「Watch Sass」をクリックすると2つのファイルが開発フォルダに自動生成されます。

style.css
style.css.map

style.css

お分かりのの通り「style.scss」をコンパイルしてできたスタイルシードになります。

.container h1 {
  color: red;
}

.container .profile h2 {
  color: green;
}

.container .profile p {
  color: blue;
}

.container .information h2 {
  color: yellow;
}

.container .information p {
  color: orange;
}
/*# sourceMappingURL=style.css.map */

これをHTMLに読み込みます。