Atomのsass-autocompileでSassのコンパイルをしてみよう

2016/08/02

Atomでコーディングをしていてｓｃｓｓのコンパイルが必要になり、簡単にコンパイルをしてくれるパッケージ「sass-autocompile」を利用したので導入と基本的な使い方までを紹介します！

■sass-autocompileとは

sass-autocompileは、sassとscssファイルをコンパイルしてくれるパッケージです。パッケージ設定でファイルの保存をしたら自動でコンパイルしてくれたり、.minファイルでコンパイルしてくれたりする便利機能を利用することができます。

■インストール前に必要なもの

sass-autocompileを利用するには、事前にnode.jsとnode-sassをPC自体にインストールする必要があります。
 

node.jsとは

JavaScriptはブラウザサイドで動作するのに対して、node.jsはサーバーサイドで動作するJavaScriptで、メモリ消費が少なくて処理が速い。
 

node-sassとは

node.jsのモジュールでscssファイルをcssファイルにコンパイルしてくれるものです。
 
 

それでは、ここから事前用意も含めて利用までの手順をみていきましょう！

■node.jsのインストール

node.jsのインストールには、公式サイトからインストーラーをダウンロードしてインストールする方法や、node.jsのバージョンを簡単に切り替えて利用できるnodebrewをインストールする方法があります。
今回は、インストーラーを利用してインストールする方法で進めていきます。
 
 

まず、公式サイトからインストーラーをダウンロードしてインストールをします。バージョンはLTS（長期サポート対象）とCurrent(最新版)を選ぶことができます。
 

node.js公式サイトはこちら
 

インストール後の確認

node -v

インストールができたら、ターミナルやコマンドプロンプトを起動して上記のコマンドを入力してみましょう。バージョンが表示されたらインストールに成功しています！
 

npmの確認

npmはnode.jsのライブラリやパッケージを管理することができるツールで、node.jsをインストールすると自動でついてくるはずですが念のために確認をしましょう。
 

npm -v

上記のコマンドでバージョンが表示されていればインストールされています！

■node-sassのインストール

node.jsのインストールができたらnode-sassをインストールします。
 

npm install -g node-sass

上記のコマンドを入力してインストールができます。-gはグローバルな領域にインストールするというコマンドです。
 

インストール後の確認

node-sass -v

上記のコマンドでバージョンが確認できれば成功です！

■sass-autocompileのインストール

node.jsとnode-sassのインストールができたら前準備は整ったので本題のsass-autocompileをインストールします。
 

パッケージの検索

Atomを起動して設定画面のインストールから検索をします。設定画面はファイル > 環境設定もしくはCtrl(Macはcommand) + ,で開くことができます。
 
 

検索フォームにsass-autocompileと入力するとパッケージが表示されるのでインストールボタンをクリックします。
 
 

これでインストールは終わりです！

■scssファイルをコンパイルしてみる

インストールができたので、実際にscssファイルをコンパイルしてみましょう！
 

テスト用のscssファイルを用意して、Atomで開いてからctrl + shift + cでコンパイルされたcssファイルが生成されていたら成功です。

■sass-autocompileの設定

設定画面の左メニューのパッケージをクリックするとインストールしたパッケージ一覧が表示されます。
 
 

一覧の中からsass-autocompileを探して、パッケージ名や無効ボタンなど以外をクリックするとsass-autocompileの設定画面が表示されます。
 
 

このような画面が表示されるので、必要な変更があれば設定してください。
 
 

Compile on Save

scssファイルを保存したタイミングで自動的にコンパイルをしてくれます。
 

Compile with ‘compressed’ output style

圧縮されたcssファイルをコンパイルすることができます。
 

Compile with ‘expanded’ output style

圧縮されずに通常のcssファイルをコンパイルすることができます。

■注意

minファイルでコンパイルしてくれたり便利なパッケージですが、node-sassがCompassに対応していないため、Compassを利用しているファイルをコンパイルするとエラーが出てコンパイルできません。

追記: 2016/08/03

こちらのAtomでSass + CompassのコンパイルをしてみようにCompassでのコンパイルの方法を書いたので必要な方は参考にどうぞ！