
軟骨(ヘリックス)のピアス探しに!ボディピアスブランドおすすめいろいろ
- Life ファッション
新着記事
人気記事
Atomでコーディングをしていてscssのコンパイルが必要になり、簡単にコンパイルをしてくれるパッケージ「sass-autocompile」を利用したので導入と基本的な使い方までを紹介します!
sass-autocompileは、sassとscssファイルをコンパイルしてくれるパッケージです。パッケージ設定でファイルの保存をしたら自動でコンパイルしてくれたり、.minファイルでコンパイルしてくれたりする便利機能を利用することができます。
sass-autocompileを利用するには、事前にnode.jsとnode-sassをPC自体にインストールする必要があります。
JavaScriptはブラウザサイドで動作するのに対して、node.jsはサーバーサイドで動作するJavaScriptで、メモリ消費が少なくて処理が速い。
node.jsのモジュールでscssファイルをcssファイルにコンパイルしてくれるものです。
それでは、ここから事前用意も含めて利用までの手順をみていきましょう!
node.jsのインストールには、公式サイトからインストーラーをダウンロードしてインストールする方法や、node.jsのバージョンを簡単に切り替えて利用できるnodebrewをインストールする方法があります。
今回は、インストーラーを利用してインストールする方法で進めていきます。
まず、公式サイトからインストーラーをダウンロードしてインストールをします。バージョンはLTS(長期サポート対象)とCurrent(最新版)を選ぶことができます。
node.js公式サイトはこちら
node -v
インストールができたら、ターミナルやコマンドプロンプトを起動して上記のコマンドを入力してみましょう。バージョンが表示されたらインストールに成功しています!
npmはnode.jsのライブラリやパッケージを管理することができるツールで、node.jsをインストールすると自動でついてくるはずですが念のために確認をしましょう。
npm -v
上記のコマンドでバージョンが表示されていればインストールされています!
node.jsのインストールができたらnode-sassをインストールします。
npm install -g node-sass
上記のコマンドを入力してインストールができます。-gはグローバルな領域にインストールするというコマンドです。
node-sass -v
上記のコマンドでバージョンが確認できれば成功です!
node.jsとnode-sassのインストールができたら前準備は整ったので本題のsass-autocompileをインストールします。
Atomを起動して設定画面のインストールから検索をします。設定画面はファイル > 環境設定もしくはCtrl(Macはcommand) + ,で開くことができます。
検索フォームにsass-autocompileと入力するとパッケージが表示されるのでインストールボタンをクリックします。
これでインストールは終わりです!
インストールができたので、実際にscssファイルをコンパイルしてみましょう!
テスト用のscssファイルを用意して、Atomで開いてからctrl + shift + cでコンパイルされたcssファイルが生成されていたら成功です。
設定画面の左メニューのパッケージをクリックするとインストールしたパッケージ一覧が表示されます。
一覧の中からsass-autocompileを探して、パッケージ名や無効ボタンなど以外をクリックするとsass-autocompileの設定画面が表示されます。
このような画面が表示されるので、必要な変更があれば設定してください。
scssファイルを保存したタイミングで自動的にコンパイルをしてくれます。
圧縮されたcssファイルをコンパイルすることができます。
圧縮されずに通常のcssファイルをコンパイルすることができます。
minファイルでコンパイルしてくれたり便利なパッケージですが、node-sassがCompassに対応していないため、Compassを利用しているファイルをコンパイルするとエラーが出てコンパイルできません。
こちらのAtomでSass + CompassのコンパイルをしてみようにCompassでのコンパイルの方法を書いたので必要な方は参考にどうぞ!
コチラも読んでみませんか?