VS Codeで簡単にSassの環境を作成する方法(Live Sass Compiler)

HTML/CSS

今回は、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>
index.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は、もちろんこうなります。

index.html

以上が「VS Codeで簡単にSassの環境を作成する方法(Live Sass Compiler)」でした。

本来ややこしい作業が入るはずですが、プラグインを使えばここまで簡単に環境を作れます。WEB制作においてscssは重要なので今回の方法でいいので、この環境は作っておきましょう。

次の記事では、Scssの書き方についてを紹介しています。環境構築が出来たら実際に書いてみましょう。

2021年1月19日HTML/CSSCSS,scss/sass,Software

Posted by KT