Atomの「less-autocompile」でLessのコンパイルをラクにしよう

「Atomエディタ」というフリーのテキストエディタをご存知でしょうか。 使いやすいインターフェイスに、クールなデフォルトのテーマ。 Atomエディタの最大の特徴である多くのパッケージにより、便利で自分好みにカスタマイズできる拡張性。 Windows、Mac、LINUXにも対応しており、今一番注目されているテキストエディタの一つです。 私自身まだ使いこなせていない機能も数多くあり、調べたり社内で情報を交換し合ったりと勉強中。 便利なプラグインがたくさんありすぎて、結局どれがいいのか分からなくなってしまったり… 私と似たような悩みを抱えている方のために、実際に私が使ってみて便利だったプラグインをご紹介します！ 今回はLessを自動でコンパイルしてくれる「less-autocompile」という便利なプラグインを使ってみました。 Atomエディタのインストールがまだの方は こちら からどうぞ。

パッケージのインストール

インストールするのはこちらのパッケージ。

インストール後のパッケージの設定などは特に必要ありません。 さくっとインストールして、さくっと使い始められるのがうれしいです。

使い方

「less-autocompile」の簡単な使い方についてご紹介します。 Atomエディタの基本的な使い方や、Lessの書き方については今回は省略します。

Lessファイルの作成

Cnrl+n (Macの方はcommand+n) で新規ファイルを作成し、lessファイルとして保存します。 cssファイルと同じ名前の方が分かりやすいので、私は「style.less」とすることが多いです。

出力するcssファイルの名前と場所を指定するオプション

lessファイルの一行目に、コメントとしてオプションを指定します。 lessファイルと同じ階層にstyle.cssとして出力したい場合はこのように書きます。 [css] // out: style.css [/css] 場所の指定も可能です。 [css] // out: ../css/style.css [/css] 未指定の場合や、「out: null」にした場合はcssファイルを出力しません。 lessファイルを機能やパーツごとに分割し、一つのcssファイルにまとめたい際などに使えます。

その他のオプションについて

他にも様々なオプションが使用できます。 いずれも一行目にコメントとして記載し、オプションを複数指定する場合はカンマで区切ります。 使用できるオプションの一覧を用意したので、是非参考にしてみてください。 [css] /* ソースマップを出力する */ // sourcemap: true /* ソースマップを出力しない */ // sourcemap: false /* cssファイルをMinify化する */ // compress: true /* cssファイルをMinify化しない */ // compress: false /* 現在のファイルを保存したときstyle.lessもコンパイルする */ // main: style.less /* 複数のオプションを指定 */ // out: style.css, sourcemap: true, compress: true [/css]

おわりに

今回は「less-autocompile」の使い方について、簡単に説明しました。 Sassを使っている方は「sass-autocompile」というプラグインもあるので是非そちらも使ってみてください。 また便利なプラグインを見つけたらご紹介します。お楽しみに～！