LESSで3倍ラクするスマートフォンコーディング

第11回 LESSを書くのに便利なツール

この記事を読むのに必要な時間:およそ 3 分

今まで,LESSの書式やファイルについて解説してきましたが,最終回の今回はLESSを書く際に便利なツールを紹介していきます。

筆者がMacユーザーのため,若干Macよりの記事になってしまっている点はご了承ください。

なお,プラグインをインストールすることで,LESSファイルのコンパイル機能を追加できるエディタ(EmacsやCodaなど)もありますが,今回は単体で動作するアプリをご紹介します。

LESS特化型ツール

LESSのために作られており,その分,どれもUIがシンプルで,使い方に悩むこともありません。

基本機能として各コンパイラともに以下の基本機能を備えています。

  • エラー出力
  • minifyの選択
  • 出力先の設定

これらの機能については,各コンパイラで特に際立った差はありません。

ここではさらにそれぞれで特徴的な機能を紹介していきます。

LESS.app

【対応OS】
Mac
【特徴】
  • ファイル保存時の自動コンパイルに対応
  • フォルダ/ファイルごとに出力先を設定できる

MacにおけるLESSの標準的コンパイラであり,初めて作られたGUIアプリでもあります。LESS自体のバージョンアップにも素早く対応しており,非常に安定感があります。

特徴は,ファイルを保存すると自動的にコンパイルしてくれること。一度設定してしまえば,コンパイラの存在を気にする必要がありません。

ただ,こちらのアプリは2015年で開発がストップし,以降は後述のCodeKitへ移行することが発表されているので,注意してください。

WinLESS

【対応OS】
Windows
【特徴】
  • ファイル保存時の自動コンパイルに対応
  • フォルダ/ファイルごとに出力先を設定できる
  • Windowsにおける標準的コンパイラ。こちらは前述のLESS.appの影響を受けて,Windows用として作られたアプリです。

    そのため,インターフェースや機能はLESS.appと非常によく似ています。LESS.appを使ったことがある方は,違和感なく使うことができるでしょう。

    SimpLESS

    【対応OS】
    Windows/Mac
    【特徴】
  • ファイル保存時の自動コンパイルに対応
  • webkitなどCSS3のベンタープリフィックスを補完してくれる(Windowsのみ)
  • Windows/Mac両対応なのが特徴。バージョン/環境を統一させるのに向いています。

    また,Windows版のみになってしまうのですが,⁠-webkit」「-moz」などのベンダープレフィックスを自動で付与してくれる機能があるのも,ほかのコンパイラにない特徴です。クロスブラウザ対応がとてもかんたんになりますね。コンパイラにない特徴です。クロスブラウザ対応がとてもかんたんになりますね。

    ただ,そうなると実質的にコンパイラの機能に依存したコードを書くことになってしまうので,コンパイラの乗り換えが困難になってしまうという問題もあります。

    筆者としては,クロスブラウザ対応は本連載の第7回の記事のように,mixinを用いて実現するほうが望ましいと考えています。

    Crunch!

    【対応OS】
    Windows/Mac
    【特徴】
  • LESSエディタが付いている
  • Adobe Airで作られたWin/Mac両対応コンパイラ。機能は非常にシンプルで,前述のと比べると,機能で劣る部分があります。

    その代わり,こちらは珍しくLESSのためのエディタ機能が付いており,作成/編集からコンパイルまでを1つのアプリでできてしまいます。

    エディタとしての機能は,やはり単体のエディタと比べるとかなり劣ってしまいますが,思いついたコードを試してみたいときに手軽に試せるため,機能が少ないわりに便利に使えます。筆者は本連載のサンプルコードを書くときにも活用しました。

    著者プロフィール

    宇野雄(うのゆう)

    UI・UXデザイナー。

    ヤフー株式会社にて,主にスマートフォンWebとアプリのUI・UX設計/デザイン/コーディングを担当。

    全く新しいモノづくりよりも,既にあるモノを新しい視点でとらえるデザインが好き。犬派。

    Twitter:@saladdays

    コメント

    コメントの記入