*

Sass/SCSSを自動コンパイル。Easy Sassが便利。

   

この記事はNEXTSCAPE クラウドインテグレーション事業本部 Advent Calendar 2018 21日目の記事です。

今日はVisual Studio Codeのプラグイン「Easy Saas」をご紹介します。

これ、Sass/SCSSを使っている人にはモチロン、使っていない人も使いたくなるような、とても便利なツールです。
圧倒的に作業がはかどります。

Sass/SCSSって何?

簡単にいうと、スタイルシートを効率よく書くことができるようにするために記法です。
継承などもできたりして、可読性もスタイルシートよりも良いです。

詳しくは以下のページをご覧ください。
https://dev.classmethod.jp/slide/scss-tutorial/

Visual Studio Codeって何?

マイクロソフトが出しているフリーのテキストエディタです。オープンソースで、Windows、Mac、Linuxで使えます。
私もMacにいれていますが、動作も軽くてサクサク動くのでお勧めです。

以下のサイトからダウンロードできます。
https://code.visualstudio.com/

Easy Saasは面倒なコンパイルが不要に。

Sass/SCSSは、最終的にCSSに変換するため、コンパイルという手順が必要になります。
コマンドを1行叩けばよいのですが、何回も修正してはコマンドをたたくという作業は地味に時間をかけてしまいます。

Easy Saasは.sass、.scssファイルを保存するだけで勝手にコンパイルをしてくれて、cssファイル、さらには圧縮した.min.cssファイルも作成してくれます。

Easy Sassのインストール

Visual Studio Codeの左メニューの一番下にあるプライグインのページをクリックして、検索窓から「Easy Sass」と検索すれば、プラグインが出てきます。
あとは右ページからインストールするだけです。

まとめ

Sass/SCSSは開発効率化のために導入したいものではありますが、その為にはいろいろと準備が必要でした。
しかし、Easy Saasを使うことでその準備が不要になります。
また、Visual Studio Codeはgit連携もありますので、

  1. Sass/SCSSで修正して保存
  2. すぐにブラウザで確認
  3. OKならgitにPush

といった一連の流れが、スムーズに行えます。
皆さんもぜひ使ってみてください。

 - Webサービス, アプリ , , ,