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]