MENU

【超簡単】VSCodeでSass(.scss)をCSSにコンパイルする方法【Live Sass Compilerプラグイン】

【超簡単】VSCodeでSass・ScssをCSSにコンパイルする方法【Live Sass Compilerプラグイン】

VSCode(Visual studio code)でSassをcssファイルにコンパイル(変換)する方法を解説します。

1つのプラグインのインストールとボタンひとつで可能なので、とても簡単です。

目次

プラグイン「Live Sass Compiler」をインストールする

アクティビティバーを表示させる

VSCodeを開いてメニューの

「表示」→「外観」→「アクティビティバー」をクリック。

拡張機能をクリックして「Live Sass Compiler」で検索をかけます。

Live Sass Compiler

検索結果に出てきたら、選択して、インストールしましょう。

Cssにコンパイル後の出力先を設定する

インストールが終わったら、右下の「歯車」→「拡張機の設定」を開きます。

Live Sass Compiler 設定

表示された中からどれでも良いので、「settings.jsonで編集」をクリックします。

拡張機能の設定

ファイルが開かれたら、{}の中に以下をコピペしてください!

"liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/css"
      }],
settings.jsonの中身

この”savePath”が出力先になります。

この場合は.scssファイルがあるフォルダのひとつ上の階層にcssというフォルダを作ってそこに.cssにコンパイルされたデータが出力(保存)されます。

ここは自分の好きな場所に設定しましょう!

実際にSassをCssにコンパイルしてみよう

例として「index」というフォルダを作り、その中に「sass」というフォルダを作成します。

sassフォルダの中にstyle.scssを作成して、下のステータスバーにある「Watch Sass」をクリックします。

Watch Sass

これで.sassファイルが保存されたら自動的にコンパイルされるようになります。

style.scssに適当にコードを書いて保存すると、Indexフォルダの直下にcssというフォルダができてその中にstyle.cssが出力されます。

SassをCssにコンパイル

これでコンパイルの完了です。

まとめ

VSCode(Visual studio code)でSassをcssファイルにコンパイル(変換)するには

  1. Live Sass Compilerのインストール
  2. 出力先の設定
  3. Watch Sassをオンにして保存

この3つだけで簡単にSassの環境を構築できるのでとてもおすすめです!

効率よくコードを書くために是非トライしてみてください!

【超簡単】VSCodeでSass・ScssをCSSにコンパイルする方法【Live Sass Compilerプラグイン】

この記事が気に入ったら
フォローしてね!

シェアお願いします!
  • URLをコピーしました!
  • URLをコピーしました!
目次