🔖

VSCode拡張機能Sass自動コンパイルを試してみた

2021/04/21に公開

CSS

拡張機能概要

Live Sass Compiler
VSCodeの拡張機能で、Sassファイルをcssに自動コンパイルしてくれる拡張機能。
Marketplaceで検索してインストールできる。

ファイルの出力先変更

MarketplaceでLive Sass Compilerを検索し、歯車(設定)をクリックし、拡張機能の設定を開く。
formatのsettings.jsonを開き、以下を追加する。

settings.json

{
	"format": "expanded",
	"extensionName": ".css",
	"savePath": "/css/"
}

savePath

「/」から始めることでワークスペースのルートディレクトリからどのパスにcssファイルを出力するか指定することができる。
「~」から始めることで、Sassディレクトリと同じ階層からのパスで指定することもできる。

実践

試しに以下の構成でhtmlを作成してみる
※cssフォルダは自動で作成される。

workspace/
  ├ css/
  │  └ stylesheet.css
  ├ sass/
  │  ├ stylesheet.scss
  └ index.html

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="css/stylesheet.css">
      <title>saas_learning</title>
  </head>
  <body>
      <div class="area_learning">
          <h1 class="title">タイトル</h1>
          <p class="description">説明</p>
      </div>
  </body>
</html>

stylesheet.scss

@charset "utf-8";

$title_color: blue;
$border_color: #000;

.area_learning {
  border: 1px solid $border_color;
  padding: 40px;
  margin: 40px;
  .title{
      color: $title_color;
      font-size: 24px;
      font-weight: 900;
  }
  .description {
      font-size: 16px;
      line-height: 1.5em;
      margin: 16px 0 0;
  }
}

Sassの監視

VSCodeの下にあるWatch SassをクリックすることでSassファイルが自動コンパイルされるようになる。(もう一度クリックで解除)監視状態でファイルを保存すると、自動的にcssフォルダが作成され、その配下にcssファイルが生成される。

生成されたcssファイルは以下の通りで、変数に値が代入され、ネストではなくリストになっていることが確認できる。

stylesheet.css

.area_learning {
  border: 1px solid #000;
  padding: 40px;
  margin: 40px;
}

.area_learning .title {
  color: blue;
  font-size: 24px;
  font-weight: 900;
}

.area_learning .description {
  font-size: 16px;
  line-height: 1.5em;
  margin: 16px 0 0;
}
/*# sourceMappingURL=stylesheet.css.map */

表示されたぺーじはこちら

拡張機能概要

ファイルの出力先変更

savePath

実践

Sassの監視

Discussion