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 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っぽいスタイルを記述します。

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に読み込みます。

style.css.map

これは検証等、デバッグで必要になるファイルですので特に気にする必要はありません。
でも消さないようにします。

自動コンパイル

一度「Watch Sass」をクリックした後は自動的にコンパイルしてくれるので勝手に「style.css」と「style.css.map」が生成されるのでとっても楽ちんです。

サーバーへアップロード

出来上がったHTMLやCSSをサーバーへアップロードしますが、同時に.scssと.css.mapもアップロードします。

これらのファイルはアップロードしても悪い事をしないと言うか、害は無いので安心して下さい。
むしろアップロードしたほうが今後のメンテナンスに有効です。

 

コメント