【自動コンパイル】VSCodeでSassを使う方法を解説

2021 / 02 / 262021 / 12 / 23

HTML, CSS

Data illustrations by Storyset

「VSCodeでSassを使いたいんだけど、自動コンパイルしてくれる仕組み作れないかな」

今回は上記の悩みにお答えします。

この記事では、VSCodeでSassを自動コンパイル環境を作る方法を解説します。

結論から言うと「Live Sass Compiler」という拡張機能を使えば解決です。
「Live Sass Compiler」のインストールから使い方までご説明します。

VSCodeをインストール

VSCodeのインストールがまだの方は、以下の記事をどうぞ。

【初心者向け】Visual Studio Codeの使い方【図解あり】

記事を読む

上記の記事では、VSCodeのインストール方法と、おすすめの拡張機能を2つご紹介しております。

Live Sass Compilerの使い方

では、VSCodeでSassを自動コンパイルするための拡張機能である「Live Sass Compiler」を導入していきます。

Live Sass Compilerをインストール

まず、画面左側の「Extensions」ボタンをクリックします。

検索欄に「live sass compiler」と入力します。
検索結果に「Live Sass Compiler」が表示されるので、インストールします。

Live Sass Compilerを使ってみる

では、実際にLive Sass Compilerを使ってみましょう。

デスクトップ上などに空のフォルダを作ります。
名前はなんでもいいです。
ここでは、「sass_lesson」と名前をつけました。

「sass_lesson」と名前をつけたフォルダをVS Codeで開きます。
ドラッグ & ドロップで簡単に開けます。

「ファイル追加」ボタンから以下の2つのファイルを作ります。

index.html
style.scss

「css」ではなく「scss」です。

index.htmlに上の画像のようなコードを書きます。
リンクさせるスタイルシートのファイル名は「style.css」にしてください。

コードを書くのが面倒な場合は以下のコードをコピペしてください。
「Ctrl + S」で保存します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sass Test</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    <h2>SassTest</h2>
  </div>
  <div class="main">
    <h1>SassTest</h1>
    <p>Sassで効率的にCSSを管理する</p>
  </div>
  <div class="footer">
    © SassTest
  </div>
</body>
</html>

style.scssにもコードを書きます。
以下のコードをコピペしてください。

body, h1, h2, p {
  margin: 0;
  padding: 0;
}

.header {
  background-color: #f79314;
  padding-left: 20px;
  padding-right: 20px;
  color: white;

  & h2 {
    line-height: 100px;
    font-size: 30px;
  }
}

.main {
  background-color: #fcfaf5;
  height: calc(100vh - (100px + 50px));
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;

  & h1 {
    font-size: 60px;
  }
}

.footer {
  background-color: #f79314;
  line-height: 50px;
  text-align: center;
  color: white;
}