2016.12.27

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

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として出力したい場合はこのように書きます。

// out: style.css

場所の指定も可能です。

// out: ../css/style.css

未指定の場合や、「out: null」にした場合はcssファイルを出力しません。
lessファイルを機能やパーツごとに分割し、一つの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

おわりに

今回は「less-autocompile」の使い方について、簡単に説明しました。
Sassを使っている方は「sass-autocompile」というプラグインもあるので是非そちらも使ってみてください。

また便利なプラグインを見つけたらご紹介します。お楽しみに~!

関連キーワード

この記事を書いたひと

横浜市在住。覚えたことや社内の様子をこのブログで発信しまくっています。

RANKING

今週の人気記事一覧