RalaCode

44件の記事があります

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

【自動コンパイル】VSCodeでSassを使う方法を解説
サムライエンジニアプラス

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

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

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

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

VSCodeをインストール

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

【初心者向け】Visual Studio Codeの使い方【図解あり】
【初心者向け】Visual Studio Codeの使い方【図解あり】
記事を読む

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

Live Sass Compilerの使い方

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

Live Sass Compilerをインストール

install_sass

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

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

Live Sass Compilerを使ってみる

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

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

open_drag

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

make_file

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

  • index.html

  • style.scss

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

sass_index

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;
}

「&」は直近の親要素を指します。
「Ctrl + S」で保存します。

watch_sass

画面の下の方に「Watch Sass」と表示されていると思います。
scssファイルを開いていると、自動で表示されます。

「Watch Sass」をクリックします。

auto_css

「style.scss」から「style.css」が自動で生成されます。

index.htmlを右クリックして「Open with Live Server」をクリックします。
Webサイトっぽいものが表示されたと思います。

「Open with Live Server」は「Live Server」というVSCodeの拡張機能をインストールしていないと表示されません。
以下の記事で「Live Server」のインストールと使い方を解説しています。

【初心者向け】Visual Studio Codeの使い方【図解あり】
【初心者向け】Visual Studio Codeの使い方【図解あり】
記事を読む

ここで、style.scssを適当に書き換えてみてください。
.headerのbackground-colorをblueとかにしてみてください。
そしてまた「Ctrl + S」で保存します。

すると自動でstyle.cssも自動で書き換わります。
「Live Server」で開いたサイトも自動で反映していると思います。

watching_sass

「Live Sass Compiler」を解除する場合は、VS Codeのウインドウの下側の「Watching...」と表示されているところをクリックします。
解除すると、style.scssを編集して保存してもstyle.cssは自動で書き換わりません。

style.scssを編集して保存した後、「Live Sass Compiler」を起動しても問題ありません。
起動したタイミングでstyle.cssが書き換わります。

パソコンをシャットダウンしたり、スリープする時は「Live Sass Compiler」を解除してください。

まとめ

最後に記事の内容をまとめます。
今回、VSCodeにSassの自動コンパイル環境を作るために行った手順は以下です。

  • Live Sass Compilerをインストールする

  • 「〜.scss」というファイルを作って保存する

  • 画面下の「Watch Sass」をクリックする

  • 自動でcssファイルが作成される

  • 画面下の「Watching...」をクリックすると自動コンパイルが解除される

というわけで、記事は以上です。

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

【自動整形】VSCodeでPrettierを使う方法【設定必要です】

【自動整形】VSCodeでPrettierを使う方法【設定必要です】

【無料】Unsplashで画像をダウンロードする方法解説

【無料】Unsplashで画像をダウンロードする方法解説

【Google Chrome】Webサイトのスマホ表示、PC表示を確認する

【Google Chrome】Webサイトのスマホ表示、PC表示を確認する

【Git】やるべき初期設定【コマンドライン使います】

【Git】やるべき初期設定【コマンドライン使います】

プログラミングって結局何から始めればいいの?

プログラミングって結局何から始めればいいの?

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy