「VSCodeでSassを使いたいんだけど、自動コンパイルしてくれる仕組み作れないかな」
今回は上記の悩みにお答えします。
この記事では、VSCodeでSassを自動コンパイル環境を作る方法を解説します。
結論から言うと「Live Sass Compiler」という拡張機能を使えば解決です。 「Live Sass Compiler」のインストールから使い方までご説明します。
VSCodeをインストール
VSCodeのインストールがまだの方は、以下の記事をどうぞ。
上記の記事では、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」で保存します。
html
<!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にもコードを書きます。 以下のコードをコピペしてください。
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」と表示されていると思います。 scssファイルを開いていると、自動で表示されます。
「Watch Sass」をクリックします。
「style.scss」から「style.css」が自動で生成されます。
index.htmlを右クリックして「Open with Live Server」をクリックします。 Webサイトっぽいものが表示されたと思います。
「Open with Live Server」は「Live Server」というVSCodeの拡張機能をインストールしていないと表示されません。 以下の記事で「Live Server」のインストールと使い方を解説しています。
ここで、style.scssを適当に書き換えてみてください。 .headerのbackground-colorをblueとかにしてみてください。 そしてまた「Ctrl + S」で保存します。
すると自動でstyle.cssも自動で書き換わります。 「Live Server」で開いたサイトも自動で反映していると思います。
「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...」をクリックすると自動コンパイルが解除される
というわけで、記事は以上です。