今回は、Visual Studio Code（VSコード）で超簡単にScssとSassの環境を作成する方法を紹介します。
WEB制作系の勉強をしている人はSCSSの技術は必須になってきます。しかしその環境作成で挫折する人が多いのが現状です。そんな時は、今回紹介する方法で超簡単に環境作成しましょう。
超簡単にVS CodeでSCSSの環境作成する方法
超簡単にVS CodeでSCSSの環境作成する方法はプラグインをインストールするだけです。
Live Sass Compilerというプラグインをインストールすれば、Scss特有のコンパイルという作業を自動で行ってくれます。
これだけです。
ただLive Sass Compilerをインストールしたら、次の「使い方」で多少の設定があるので、そこはしっかり行って下さい。
Live Sass Compilerの使い方（設定）
VS Codeのプラグインページに移動して、Live Sass Compilerの右側にある⚙マークをクリックして下さい。そこにある「拡張機能の設定」をクリックして設定ページに移動して下さい。
この設定ページの一番上にある「Autoprefix」の設定の左側にある⚙マークからJSONとして設定をコピーをクリックして下さい。
その項目の枠にある「setting.jsonで編集」をクリックして下さい。出てきたページにコピーしたJSONをペーストします。
再び設定ページに戻って、「Formats」の項目でも同じことをします。
（⚙マークをクリック→JSONコピー→setting.jsonで編集→ペースト。）
するとsetting.jsonでは、こんな感じの記述になります。
実際に書かれているコードは以下です。
{}や,を忘れないように。
{
//ベンダープレフィックスの指定
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
],
"liveSassCompile.settings.formats": [
// 読みやすいフォーマット
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
// 圧縮されたフォーマット
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css/"
}
]
}1~7行目は「日本国内のシェアが1%以上」または「最新バージョンから数えて2つまで」という条件のブラウザに対応したベンダープレフィックスを自動で付けますといった意味です。
その下からは、出力するフォーマット名と保存場所です。「expanded」は整形された形での出力で、「compressed」は圧縮された形での出力になります。なので今回はstyle.cssとstyle.min.cssが作成されます。
Live Sass Compilerの使い方（コンパイル）
ここまでの設定がちゃんと出来ていれば、自動でコンパイルがされます。では、実際に機能しているか確認しましょう。
今回は、以下の適当に作成したindex.htmlでテストします。css/style.cssを読み込んでいますが、style.cssはまだ存在していません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SCSSのサンプル</title>
<link rel="icon" href="favicon/favicon.jpg">
<meta name="description" content="SCSSのサンプル">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div><p>テスト</p><span>テスト</span></div>
<div><p>テスト</p><span>テスト</span></div>
<div><p>テスト</p><span>テスト</span></div>
</body>
</html>
まずは、ファイルの構造を以下のようにして下さい。cssフォルダの中には何も入っていません。scssフォルダの中には.scssの拡張子でファイルを用意します。
style.scssには、以下のように書いています。これがコンパイルされるか試してみます。正常に動作すれば、先程の設定で指定したCSSファイル内にstyle.cssとstyle.min.cssが追加されるはずです。
div {
color: red;
background: blue;
width: 100px;
height: 200px;
p {
font-size: 2em;
color: #fff;
span {
font-weight: bold;
}
}
}style.scssを開いた状態で下のバーにある「Watch Sass」をクリックして下さい。
するとファイル内に自動でstyle.cssなどが追加されます。
こうなれば成功です！！おめでとうございます！！
実際にstyle.cssを見てみるとscssで書いたのが綺麗にコンパイルされています。
実際に出力されたCSSコードは以下です。
div {
color: red;
background: blue;
width: 100px;
height: 200px;
}
div p {
font-size: 2em;
color: #fff;
}
div p span {
font-weight: bold;
}
/*# sourceMappingURL=style.css.map */そしてCSSを読み込んでいるindex.htmlは、もちろんこうなります。
以上が「VS Codeで簡単にSassの環境を作成する方法（Live Sass Compiler）」でした。
本来ややこしい作業が入るはずですが、プラグインを使えばここまで簡単に環境を作れます。WEB制作においてscssは重要なので今回の方法でいいので、この環境は作っておきましょう。
次の記事では、Scssの書き方についてを紹介しています。環境構築が出来たら実際に書いてみましょう。
