SCSSを自動でCSSに変換(コンパイル)する方法をわかりやすく解説!

SCSSをCSSに自動変換する方法

SCSSで記述したコードはそのままでは使えません。CSSに変換(コンパイル)する必要があります。

変換する方法はいろいろとあるようですが、初心者の方にお勧めの方法はVisual Studio Code(VS Code)というテキストエディタで自動的にコンパイルする方法です。

SCSSを記述すれば、自動的にCSSファイルが出来上がります。

記述したSCSSに変更を加えれば、自動的にCSSファイルも更新されます。

そんな便利な機能を備えたVisual Studio Code(VS Code)の設定方法についてまとめてみました。

Visual Studio Code(VS Code)をインストールする

まずはVisual Studio Code(VS Code)のインストールです。

Visual Studio Code(VS Code)はMicrosoftが提供しているテキストエディタです。

拡張機能が豊富に用意されていて、カスタマイズがしやすく、無料のエディタなので、プログラミング初心者向けのテキストエディタとして人気があります。

Visual Studio Code(VS Code)の公式サイトからダウンロードできますので、さくっとインストールします。

https://code.visualstudio.com/

SCSSをCSSに自動変換する方法

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

最初にLive Sass Compilerをインストールします。

Live Sass Compilerはscssをcssに変換してくれる拡張機能です。

Visual Studio Code(VS Code)を開くと左下に歯車のアイコンがあります。

SCSSをCSSに自動変換する方法

歯車のアイコンをクリックするとメニューが表示されるので「拡張機能」を選びます。

SCSSをCSSに自動変換する方法

左上の検索ボックスに「Live Sass Compiler」と入力します。

SCSSをCSSに自動変換する方法

検索結果の一覧から「Live Sass Compiler」を選んでインストールします。

SCSSをCSSに自動変換する方法

Live Sass Compilerを動かす

両方のインストールが終わるとVisual Studio Code(VS Code)の画面の右下にこのようなアイコンが現れます。

SCSSをCSSに自動変換する方法

このWatch Sass をクリックするとWatching…に変わります。

この状態でscssファイルを保存すると自動的にコンパイルされてcssファイルが出力されます。

Live Sass Compilerの設定

Live Sass Compilerの初期設定ではScssファイルと作成されたCSSファイルが同じ場所に出力されます。

scss
├── index.scss
├── index.css

これを別の場所に出力されるように設定を変更します。

scss
├── index.scss
css
├── index.css

Visual Studio Code(VS Code)の左下の歯車から拡張機能を選び、検索窓で「Live Sass Compiler」を検索します。

SCSSをCSSに自動変換する方法

右下の歯車をクリックして「拡張機能の構成を設定します」を選びます。

表示された中から「Live Sass Compile ? Settings: Formats」の「setting.jsonで編集」をクリックします。

開いたsetting.jsonに次のようにコードを書きます。

{
     "liveSassCompile.settings.formats":[
          {
               "format": "expanded",
               "extensionName": ".css",
               "savePath": "~/../css"
          }
     ],
    "liveSassCompile.settings.generateMap": false
}

"format":

フォーマットの形式を指定しています。

expanded
デフォルトの形式です。

div {
  width: 100px;
}
div a {
  color: #fff;
}

nested
行間が詰まって表示されます。

div {
  width: 100px; }
  div a {
    color: #fff; }

compact
プロパティと値が1行にまとめられて表示されます。

div { width: 100px; }
div a { color: #fff; }

compressed
改行なしで表示されます。

div{width:100px}div a{color:#fff}

"extensionName":

変換した後のファイルの拡張子を「.css」に指定しています。
圧縮されたCSSファイルにしたい時には「.min.css」という拡張子にします。

"savePath":

cssファイルの格納先を指定しています。
今回はscssフォルダと同じディレクトリのcssフォルダ内に格納する設定にしています。

"liveSassCompile.settings.generateMap":

Google Chromeのディベロッパーツールでcssファイルのソースを見たときに、scssファイルのどの部分を変換しているかを示してくれるファイルをソースマップといいます。

デフォルトでは自動生成になっているので、不要な方はfalseの設定をしておきましょう。

以上で設定が終わりです。

あとはscssファイルを保存するたびにcssファイルが生成され更新されていきます。