1. まとめトップ

Atom で LESS 自動コンパイル

Atom Editor で書いた LESS を CSS にコンパイルするのに便利なパッケージ(機能拡張)の探し方・使い方。

更新日: 2016年07月25日

1 お気に入り 1167 view
お気に入り追加

この記事は私がまとめました

SASS(SCSS),LESS,Stylus などのCSS拡張言語は便利そうだけど、環境構築が面倒。そう思って二の足を踏んでいる人、けっこう多いんじゃないでしょうか。Atom Editor のパッケージ(プラグインのようなもの)を使えば簡単に LESS のコンパイルができます。コマンドプロンプトやターミナルの黒い画面を出す必要はありません。

パッケージ(機能拡張)を探す

Atom の設定「パッケージのインストール 」で「LESS Compiler」とでも検索すれば大量にヒットします。今回はダウンロード数、スター数ともに最も多い「less-autocompile package」を使ってみます。

less-autocompile package

使い方

.less ファイル1行目のコメントでオプションを指定します。

今回は style.less が header.less を @import し、 HTMLファイルが読み込むのはコンパイルされた style.css のみ。という例で説明します。ファイルの階層構造は以下のとおり。

htdocs
├ css
│└ style.css
├ less
│ ├ style.less
│ └ header.less
└ index.html

out

出力するCSSファイルの名前と場所を指定します。未指定、または「null」を指定するとCSSファイルを出力しません。

style.less を css フォルダに style.css として出力する例
// out: ../css/style.css

sourcemap

sourcemap を出力する場合に指定します。@import するファイルに指定しておくといいでしょう。今回の例では style.less。


// sourcemap: true

compress

コメントや改行を取り除き、 minify された CSS ファイルを出力します。


// compress: true

main

編集中のファイルを保存すると、このオプションで指定した LESS ファイルもコンパイルされます。


// main: style.less

@import するファイルすべてにこのオプションを付記するのが面倒。Adobe Brackets の Less auto compile 機能拡張みたいに compile.json ファイルか何かで一括指定できればいいのに…

オプションを複数指定する場合はカンマで区切ります。

style.less の例
// out: style.css, sourcemap: true, compress: true

header.less の例
// out: null, main: style.less

1