アップデートのきっかけ

LESSTESTERを見直すきっかけになったのは、StackOverflowで「バージョンが古い。5年前のバージョン。（意訳）」と言及されていたのを見かけた事。 実際は、Less v1.7.0が出たのが2014年2月でLESSTESTERアップデートが翌3月なので3年しか経ってない事をここに釈明しておきます。 しかし、Lessのバージョンがv2.7.2まで上がっている間ずっと放置してしまったのは反省しないといけませんね。

cf) https://github.com/less/less.js

本当はLessユーザーも希少な様子なので閉めようかとも考えましたが、 せっかく公式にも取り上げてもらっていた事ですし、 案件で得られた経験値を試すついでにまるっと作り直してみようと思いました。

そして出来たもの

新しくついた機能 :

• ドラフトが端末に保存できるようになりました
• Lessのバージョンを選択できるようになりました
• キーマップに sublime が追加されました
• リアルタイムコンパイル

新しくつけようと思ったけどやめた機能 :

• URLでシェアする機能（理由 : コストのわりに使われ無さそう）

活用した技術など :

• Vue.js – https://jp.vuejs.org/
• AWS S3の静的サイトホスティング
• AWS Route53 + CloudFront でSSLに対応
• （おまけ） さくらのメールボックス

感想

ゼロから組み直したにしては、AWSとVue.jsが大変便利だったおかげで短時間で完成しました。

Vue.js

現在進行系で進んでいるプロジェクトで使っているのですが、 低い学習コストのわりに高機能かつ使い勝手が良く、規模問わず動的なWebアプリケーションを作るのに大変便利です。

AWS S3

言わずと知れたS3さんは便利すぎる。 もう全部これでいいんじゃないでしょうか。

AWS Route53 + CloudFront

SSL対応がこんなに簡単で安価になるとは、時代を感じます。 CloudFrontは高機能である反面、デプロイと変更の適用で結構待たされるので、いろいろな設定を試す段階ではちょっと辛い部分はありました。

また、今回は使っていませんが API Gateway / Lambda / RDS あたりは触る機会がどんどん増えていくのではないかなと思っています。

さくらのメールボックス

SSL対応の際にドメイン所有者の確認のためメールが送られるので、それを受け取る為に使いました。 年額1000円程度で複数ドメインを使用できるのでかなりリーズナブルです。 メールサーバの構築はなにかと面倒なので、ぜひ利用していきたい選択肢ですね。

セキュリティ対策を強化したメールサーバー専用プラン【メールボックス】

まとめ

お買い物もホビーも開発もAmazonに依存する時代の到来です。 それぞれのリソースについては時間があれば追って使い方などを記事にまとめておきたいところです。

LESSTESTER リニューアル

LESSTESTER – Test Your LESS Code.

自前のライブラリの試験運用を兼ねてまっさらな状態から作りなおしました。 機能的にはそんなにかわりはないですが、いくつか変更点がございます。

• 英語にしちゃいました
• HELP はなくしました（オフィシャルのドキュメントを参考にしましょう）
• Vim にくわえて Emacs キーバインドを追加する事で宗教戦争を緩和する狙い
• localStorage で設定やら入力内容を保持するようにしています

こんなものをレガシーな環境で使う人はほとんどいらっしゃらないと思うので、 そこらへんは切って制作しています。

英語にした理由は、アクセスのほとんどが英語圏からの物である為と、複数言語対応にする程の内容がないからです。 以前どこかの記事で紹介された際に「英語サイト」と書かれたりしていたぐらいなのでさして影響もないでしょう。

日本と海外におけるLESS

LESSTESTER への日本からの訪問者はあまり多くはありません。 そもそもただのテスターなので分母自体も少ない上に、英語圏の広さに対する日本の狭さもあるわけですが、 アクセスを言語・地域で調べてみるとこのような感じになりました。

言語別（上位5）

1. 英語 : 57.23%
2. ロシア語 : 4.98%
3. フランス語 : 4.27%
4. 日本語 : 4.16%
5. ポルトガル語 : 3.18%

地域別（上位5）

1. アメリカ : 13.11%
2. インド : 11.09%
3. イギリス : 5.99%
4. 日本 : 5.24%
5. カナダ : 5.17%

また、先日 LESSTESTER を辿ってUKからメールでお問い合わせを頂きました。（LESSはあまり関係のない用件でしたが） そこで話をする限り、どうやら日本と英語圏で LESS の普及率や人気は結構違うという印象を受けました。

昨今の日本では Sass が人気ですね。書籍も出ていてブログ記事にも頻繁に取り上げられ、勉強会のテーマにもなっています。 対して LESS はどうかというと、言及する人自体自分以外に周りにほとんど見かけません。 しかし海外の投稿などを拝見すると、Sassに負けじとしっかり紹介されていて、Twitter Bootstrap ではベースとして採用されていたりします。

なんとなく一昔前の Movable Type と WordPress を思い出す現象ですね。 現在のWordPressほどに台頭してくるとまでは考えていませんが、 将来的に LESS の普及率が上がる余地はきっとまだあるでしょう。

LESS

LESS は Sass や Stylus 等と並び称されるCSSのメタ言語です。 くだいて言うと、スタイルシートをもっと楽に効率よく書くために開発されたツールです。 三者の中では Sass が筆頭で使われていて、LESS と Stylus がそれに続く印象です。

私の知る限りでは、元々 LESS は Sass と同じく Ruby ベースで開発されていましたが、 並行して開発された LESS.js の方が主流となって JavaScript ベースで開発されるようになり、 現在に至っています。

LESS 記法の基本

上に挙げたメタ言語ではおそらくどれでも共通している機能ですが、

• セレクタを入れ子に出来る
• 変数が使える
• ミックスイン（関数のようなもの）が使える

これらの機能を把握しておくだけで、スタイルシートのコーディングが効率化出来るでしょう。

// 変数
@color-black: #000;
@color-red: #c00;

// ミックスイン
.mx-box (@bg-color: #eee, @radius: 10px){
    background-color: @bg-color;
    border-radius: @radius;
    padding: @radius;
}

// セレクタの入れ子
.container {
    .box {
        &.black {
            // ミックスインと変数の呼び出し
            .mx-box(@color-black, 8px);
        }
        &.red {
            .mx-box(@color-red, 8px);
        }
    }
}

上のコードを LESS でコンパイルすると、次のようなコードが出力されます。 （拙作ですが、LESStester.com を使ってオンラインで出力のテストが出来ます）

.container .box.black {
    background-color: #000;
    border-radius: 8px;
    padding: 8px;
}

.container .box.red {
    background-color: #c00;
    border-radius: 8px;
    padding: 8px;
}

残念ながら、この例のコードはあまりに短い為にメタ言語の魅力を十分に伝えきれません。 「単にCSSが長くなっただけじゃないか」と思われる方もいらっしゃるかもしれません。

しかし例えば、似たパーツのバリエーションを多数作らなければいけなかったり、 複雑な子孫関係を持ったセレクタを延々と書かなければならないスタイルシートでは、どうでしょうか。 また、スタイルシートを書いた人の思考は、どちらによりよく反映されるでしょうか。 共有して作業しやすいのは、どちらでしょうか。

コードの行数よりも、調整やメンテナンスの効率で大きな違いが出てくる未来が想像できます。

LESS の魅力

こうしたツールはやはりマジョリティに依りたくなるのが当然です。 機能面でも、歴史があって柔軟かつ多彩な Sass に叶わない部分は多くみられますが、 LESS にも優れている所は勿論あるのです。

JavaScript ベースであること

全て JavaScript で書かれている為、クライアントサイドで動かすことができます。 実際の開発ではコンパイル済みのCSSに差し替えた方が良いと思いますが、 少し何かを試したい場合などには便利ですね。

<link rel="stylesheet/less" href="style.less">
<script src="less.js"></script>

また、JavaScript ベースだということは、 近年流行にのっている Grunt との相性も良いという事です。

Grunt では Sass / LESS / Stylus 共にコンパイルするプラグインが公式に提供されています。 JSベースである LESS / Stylus は npm でプラグインをインストールすればすぐ使えるようになりますが、 Sass は別途 ruby と sass をインストールしておく必要があります。

また当然、Sass は外部コマンドを node.js から呼ばなければならないので、 どうしてもコンパイルの効率が落ちてしまいます。

CSS離れをしない記法であること

これが LESS を推したい一番の理由なのですが、LESS の記法は他の二者に比べると生のCSSにかなり近い形になっています。 例えば、基本的なミックスイン（関数のようなもの）を LESS で書くとこうなります。

.border-radius(@radius:10px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.box { .border-radius(20px); }

CSS でクラスを定義するのとあまり変わりませんね。

「CSS離れをしない」という事は反面、Sass が持つような 条件分岐やループなどの強力な機能を実装しないという事になりますが、 学習コストを抑えられるという点ではメリットになります。

CSSの素養のある方なら誰でもそのコードを理解する事ができ、使いこなすようになるのにさして時間を要しません。

Bootstrap は LESS ベースです

Twitter からリリースされている Bootstrap は LESS で開発されており、 プロジェクトに Bootstrap を組み込む際には単純にCSSを読み込む他に LESS ファイルを利用する方法があります。

必要なモジュールだけを読み込んだり、変数を書き換えて見た目を調整したりする事ができるほか、 便利なミックスインも多数提供されています。 LESS で設計する際の教材としてみても良いかもしれませんね。

（なお、Bootstrap の Sass 版はサードパーティで公開されている方がいます）

注目すべき LESS の機能

最近になって実装された機能や、おすすめしたい要素等を少しご紹介します。

ミックスイン

ごく基本的な機能ですが、先に紹介した通り LESS のミックスインは非常にシンプルな作りになっています。

.inline-block(){
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.test {
    .inline-block();
}

引数を受け取る為の “()” 以外は CSS のクラスと変わらない記法です。 さらに、通常の CSS クラスもミックスインとして使用する事ができます。

.inline-block { ... }
.test {
    .inline-block();
}

上の2つのコードの違いは “()” の有無ですが、 これが記述されていない場合は通常の CSS クラスとして認識され、それ自身もコンパイル時に出力されます。 “()” が記述されていた場合はミックスインとして解釈される為、CSS のコードには出力されません。

名前空間

LESS のミックスインは 名前空間 をサポートしています。 多階層のミックスインを定義し、“>” で辿る事で呼び出すことができます。

.font-size (){
    .large (){ font-size: 1.5em; }
    .normal (){ font-size: 1em; }
    .small (){ font-size: 0.8em; }
}
.test {
    .font-size > .large();
}

このコードは次のように出力されます。

.test{font-size:1.5em}

ミックスインの名前による衝突をさけたり、LESS ベースのフレームワークを作るときなどに便利そうです。

extend

LESS 1.4 からサポートされたこの機能は、 元々 Sass で実装されていた extend を便利に感じた @hokaccha 氏が プルリクエストを送ったのが発端になったのだと思われます。 長いディスカッションの末、次のような形に落ち着いた模様です。

.box {
    background-color: #eee;
    border-radius: .5em;
    padding: 1em;
}
.foo {
    &:extend(.box);
    color: #333;
}
.bar {
    &:extend(.box);
    color: #00c;
}

&:extend( selector ) とする事で対象のスタイルを受け継ぐ事ができます。 普通のミックスインと違うのは出力の仕方です。 ミックスインの場合は “.box” の中身がそのままそこに展開されますが、 extend は巻き上げてグループ化して定義します。

上のコードは次のように出力されます。 最終的なコード量がかなり節約されますね。

.box,.foo,.bar{background-color:#eee;border-radius:.5em;padding:1em}
.foo{color:#333}
.bar{color:#00c}

多彩なインポート

外部 CSS をインポートする @import ですが、LESS では書き方によって特別な働きをします。

• “*.css” をインポートすると @import 文のまま残す
• “*.less” をインポートすると、LESS で展開した結果をインポートする
• “*.less” の場合は拡張子を省略する事ができる

これが基本的なルールですが、 1.4 から @import (less) “style.css” のように 明示的に展開させる事が出来るようになりました。 現在開発中の 1.5 からは (inline) も使えるようになるようです。

// @import 文がそのまま残ります
@import "style.css";

// LESS でコンパイルされた結果がその場に展開されます。
// 拡張子を省略した場合は補完されます。
@import "style.less";
@import "style";

// (1.4~) 明示的にless|cssファイルとして処理する
@import (less) "style.css";
@import (css) "style.css";

// (1.5~) CSSファイルをその場に展開します
@import (inline) "style.css";

参考資料

• LESS « The Dynamic Stylesheet language
• LESSTESTER – Online Compiler fo LESS CSS
• Bootstrap

2014/1/10

Less の表記を LESS に統一しました。

Less/Sass/Stylus をGruntでコンパイルする

ではさっそく、GruntでCSSプリコンパイラを扱うタスクを紹介します。

• grunt-contrib-less – LessをCSSにコンパイルします
• grunt-contrib-sass – SassをCSSにコンパイルします
• grunt-contrib-stylus – StylusをCSSにコンパイルします

指定できるオプションは異なりますが、設定の仕方に差はありません。

違いを挙げるならば、Less/StylusはJavaScriptで書かれているのでnode.js上で動作させられますが、 RubyベースのSassは外部のsassコマンドを呼び出す仕組みになっており、別途インストールが必要です。 結果、Gruntとより相性が良いのはLess/Stylusであると言えますね。

ここでは、私の好きなLessを例にあげてみます。

Lessをコンパイルする（grunt-contrib-less）

基本設定

まず “grunt-contrib-less” をインストールしておきます。

$ npm install grunt-contrib-less

Gruntfile.js の内容は、例えば次のようになります。

module.exports = function(grunt){

    // grunt-contrib-less タスクの読み込み
    grunt.loadNpmTasks("grunt-contrib-less");

    grunt.initConfig({
        less : {
            // 作業のラベルは"dist"にしてみます
            dist : {
                // オプションの指定
                options : {
                    compress : true
                },
                // コンパイルするファイルの指定
                files : {
                    "./assets/css/style.css" : "./assets/less/style.less"
                }
            }
        }
    });
};

※ 基本的なタスクの書き方については 前編 にて

“options”セクションでオプションの設定を行い、 “files”セクションで出力するファイルの指定を行います。

“files”のキー（左辺）には出力先のCSSファイル、値（右辺）には元となるLessファイルへのパスを指定してください。 上の例では、 “./assets/less/style.less” がコンパイルされた結果が、”./assets/css/style.css” に保存されます。

実行

$ grunt less:dist

オプション

多く使われるであろうオプションは次の物でしょう。

• compress : Boolean (false) – 空白などを除去して圧縮します
• yuicompress : Boolean (false) – cssmin.js（YUICompressorのJS版）で圧縮します

その他のオプションについては grunt-contrib-lessのREADME を参照してください。

ファイルの更新を検知してコンパイルする（grunt-contrib-watch）

基本設定

多くのコンパイラにも実装されているファイル監視機能ですが、 Gruntでも grunt-contrib-watch というプラグインとして提供されています。

npm install grunt-contrib-watch

先ほどのLessのタスクを、ファイルを監視して実行してみます。

module.exports = function(grunt){
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.initConfig({
        less : {
            dist : { ... }
        },
        watch : {
            // ラベルは"less"にしてみます
            less : {
                // "files"セクションで監視するファイルの条件を指定
                files : [
                    "./assets/less/*.less"
                ],
                // "tasks"セクションで実行するタスクを指定
                tasks : [
                    "less:dist"
                ]
            }
        }
    });
};

“files”セクションで監視するファイルの条件を設定します。 そして“tasks”セクションで、“files”のファイルが更新された場合に実行するタスクを設定します。

“files”の値には、直接ファイル名を指定する他にパターンマッチングを使用する事ができ、特定ファイルの除外などの細かい設定が可能です。 詳細は公式ドキュメントにあるのでご参照ください。

cf) Globbing patterns | Configuring tasks – Grunt: The JavaScript Task Runner

実行

監視を開始するとターミナルは待機状態になります。

$ grunt watch:less
Running "watch:less" task
Waiting...

“./assets/less/” にあるLessファイルを更新すると、自動的に “less:dist” タスクを実行する様になります。

livereload もある？

私は使ったことがありませんが、livereload（ファイル更新を検知してブラウザをリロードする）を実現するプラグインもあるようです。

• gruntjs/grunt-contrib-livereload · GitHub

ここでは説明を省きますが、このプラグインは上で挙げた “grunt-contrib-watch” ではなく “grunt-regarde” の使用が推奨されるようです。

Note that grunt-contrib-livereload is designed to use grunt-regarde instead grunt-contrib-watch (mainly due to shortcomings in the watch task which doesn’t give access to changed files because it spawns tasks in subprocesses.)

GUIコンパイラでいいんじゃないの？

非常にもっともなご意見です。

本記事で挙げたCSSプリコンパイラの事例に限って言えば、 Compass、CodeKitやLess.app等、優秀なGUIコンパイラが数多くリリースされているので、 「黒い画面」が苦手な方は無理して導入する事もないと思います。

ただ、GUIコンパイラに対するGruntの優位点を挙げるとすれば、 環境を跨いでの設定の共有が極めて容易な点かな、と思っています。 nodeが動く環境ならばOS問わずどこでも同じ設定ファイルで、コマンド一発で同じ事が出来るわけです。

前編で触れたGruntの魅力に興味を持たれたならば、 これを機に「黒い画面」とのお付き合いを始めてみても良いのではないでしょうか。

まとめ

そんなわけで、最近ではGitとGruntとBowerのセットで制作を進めています。

これらの優秀なソフトウェアの開発者には足をむけて寝られませんが、 オープンソース故に多方面にいらっしゃるわけで、逆立ちして寝るしかなさそうです。

WinLess

公式サイト : WinLess – Windows GUI for less.js

MacではLess.appをはじめとして、UIが優秀なコンパイラが複数あるようですが、
Windowsはまだコレ！という物に出会えていませんでした。が、これはかなり良いです。

WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the webdeveloper who uses Windows.

先日記事にしたLessParserはLess.appの模倣をうたっているだけあって確かに似ていましたが、
個人的に欲しい機能である、「フォルダのドラッグドロップ登録」が出来ませんでした。

WinLessはそのドラッグドロップ登録に対応している他、

• 通知メッセージの表示
• デフォルトで「Minify」をチェック

などの設定項目があり、親切です。

アプリケーション画面

こんな感じになっていて、基本的にはLess.app（LessParser）と操作法はかわりません。
File > Settings で設定を変更できます。

現行バージョンの設定項目は以下の通り。
（本稿執筆時のバージョンは1.5.2）

General

• Start with Windows
• Start minimized

Compiling

• Minify by default
• Automatically compile files when saved
• Show message on successful compile

通知メッセージをONにすると、
タスクバーのアイコン付近にポップアップでメッセージが表示されます。

まとめ

概ねLessParserで満足していたのですが、
唯一物足りなかったドラッグドロップに対応するコンパイラが出てきてくれて、
きっとLessniumも思い残す事はないでしょう…。

LessのMixinについて

LessにおけるMixinというのは、簡単に言うと関数のようなもので、
どこかで宣言しておけば、セレクタの中で呼び出すことが出来、
結果としてその中身がセレクタ内に展開されます。

ごちゃごちゃとわかりづらいので、公式の例を拝借します。

.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

こんな感じに宣言しておきます。()の中身は引数と初期値です。
セレクタ内で呼び出すときは…

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners( 10px );
}

こんな感じで呼び出すと、それぞれ展開されて下のコードのようになります。

“#header”の方は引数を渡していないので、初期値の5pxが適用されています。

/* 出力結果 */
#header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#footer {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

SassのMixinとの違い

SassとLessの記法は非常に良く似ていますが、
大きく異なる点として、変数の記号（@ではなく$）と、
Mixinの書き方があげられます。

前述の例をSCSSで書くと、こんな感じになると思います。

@mixin rounded-corners( $radius:5px ){
    border-radius: $radius;
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius:$radius;
}

#header {
    @include rounded-corners;
}
#footer {
    @include rounded-corners( 10px );
}

Lessが通常のCSSクラスの記法と酷似しているのに対し、
Sassの記法は、一発でMixinとわかるような書き方になっていますね。
可読性の点ではSassの方に軍配があがりそうですが、
この記法はLessの長所の一つでもあります。

CSSクラスもMixinとして使える

LessのMixinはCSSクラスと似ているだけではなく、
普通のCSSクラスもMixinとして使用する事ができます。

// 普通のCSSクラス
.hoge {
    background-color:#333;
    color:#fff;
}
.fuga {
    .hoge;
    font-weight:bold;
}

出力結果

.hoge {
    background-color:#333;
    color:#fff;
}

.fuga {
    background-color:#333;
    color:#fff;
    font-weight:bold;
}

特別な記述をしなくても、簡単にプロパティを継承出来てしまうわけですね。
これは楽です。

Mixinで多重継承する

この仕組みは、OOCSSの様な作り方をCSSだけで行いたい場合に役立ちます。

従来の書き方

.box {
    padding:10px;
    margin:10px;
}
.dark {
    background-color:#111;
    color:#fff;
}
.rounded-corners {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

例えばこのコードで黒くて角丸なボックスを要素に適用したい場合、
次のようなHTMLになると思います。

<div class="box dark rounded-corners">
    ...
</div>

Mixinによる継承

ここでLessのMixinを使用して、一つ記述を書き足してみます。

.mybox {
    .box;
    .dark;
    .roudned-corners;
}

こうすることにより、divにあてがうクラスはよりシンプルになります。

<div class="mybox">
    ...
</div>

オブジェクト指向的なCSSを書きたいけど、HTMLはスッキリさせたい。
そんなケースによさそうです。

デメリット

HTMLはスッキリしますが、出力されるCSSはそうはいきません。
（誰が見るわけでもないかもしれませんが）

呼び出される都度、何度でも展開されるわけなので、
同じ事を繰り返して記述する、いささかしつこいCSSになるでしょう。
些細な差かもしれませんが、ファイルサイズもかさみますね。

extendをLESSに実装した例

昨日、AdventCalender14日目の@hokacchaさんが、
よりスマートなソリューションについて記事にされていたので、是非。

LESSにextendを実装してみた – hokaccha.hamalog v2

出力されるCSSが、大変いい感じになりますね。
extend、よさげです。

LESS の1.4系より、extendが公式に導入されています。
less.js/CHANGELOG.md at master · less/less.js

オマケ：無限ループの罠

ちなみに、互いにそれぞれを呼び出すMixinを作ると、
当たり前ですが無限ループに陥ってコンパイラが落ちる事もあると思いますので、
ご注意ください。

良い子は真似しちゃだめ！

.hoge {
    color:#fff;
    .fuga;
}
.fuga {
    color:#ccc;
    .hoge;
}

おわり

それでは引き続きLess & Sass Advent calendar 2011をお楽しみくださいませ。

LessParserについて

• Less Parser

AIRで開発されている、クロスプラットフォームのLessコンパイラ。
AdobeAIRが入っているOSならどこでも動作するでしょう。

Mac版のLess.appの影響を強く受けているようで、
レイアウトも使い方もとても良く似ています。
作者同意のもと、Less.appのレイアウトをベースに開発したとの事。

It is possible that you’ve come across “Less.app for Mac OSX” developed by Bryan D K Jones. With his consent, I have based my application layout on the layout of his application..

使い方

プロジェクトの登録

1. Addをクリックして、プロジェクトの名前と監視するディレクトリを入力します。
2. 右カラムに、.lessファイルのリストが表示されます。
   
   左のチェックボックスはコンパイルするかどうか、右はMinify（圧縮）するかどうかをチェックします。
3. 左下の「Automaticaly parse files on save」にチェックが入ってれば、
   
   ファイルの更新を検知して自動的にコンパイルしてくれます。

ログ画面

上の「Log」ボタンをクリックするとコンパイルのログが表示されます。

Less.appとの比較

AIR版ということもあり、
本家Less.appと比べて出来ない事もいくつかあるようです。

• ドラッグドロップによる登録
• アウトプットパスの設定

個人的に残念なのは、AIRのディレクトリ選択ダイアログが使いづらい所でしょうか。
ドラッグドロップ使えればもっと素敵なのですが（AIRなら実装出来たようなおぼろげな記憶も…）

Lessniumと比較して

• フォルダ単位で登録ができ、ファイル毎でもコンパイルのon/offが選択できる。
• 圧縮のon/offが選択出来る

Less.app同様に、非常に使いやすいUIで細かい設定が出来、
言うまでもなくLessniumの完全上位互換ですね。
このプロジェクトが存続する限りは、Lessniumは開発されない事と思います。
作者もLessParser使いますし（！

まとめ

Lessniumが要らない子になるのはちょっとだけ寂しいですが、
元々Windowsで動くものが無かったから作っただけで、
開発する人が出てきたと言う事は、それだけLessが市民権を得てきたという事ですし、
非常に使いやすいアプリなので、素直に嬉しいです。

スライド

ざっくりとした内容

• Lessってなに？
  • 公式 : LESS « The Dynamic Stylesheet language
• Lessだと何が幸せなのか？
• Lessの記法いろいろ
  • 変数
  • ミックスイン（関数のようなもの）
  • 演算子
  • セレクタの入れ子
• Lessの使い方
  • クライアントサイドでコンパイルする
  • node.jsで実行する
  • GUIクライアント for Mac : LESS.app For Mac OS X
  • GUIクライアント for Win : TitaniumデスクトップでLESS.jsのフロントエンドをこさえてみた
• LESSTESTERの紹介
  • LESSTESTER – Online Compiler fo Less CSS

なぜSassじゃないのか？

というもっともなツッコミを参加者様より頂きました。
確かにSassの方が多機能でメジャー（つまりこの先もメンテされる可能性が高い）ですが…

• 先にLessの方を知ってしまった
• JavaScriptベースに変わったので色々出来て、軽快
• クライアントサイドのコンパイルが嬉しい
• マイノリティを応援したい

などといった理由から、Lessを愛し続けています。

ただ、チームで制作したりする場合は、
メジャーな方使ったほうが無難な気はしますね。

LESSTESTERとは

LESSTESTER – Online Compiler fo Less CSS

Lessのオンラインコンパイラです。
左のテキストエリアにLess記法で入力してShift+Enterすると、
右のテキストエリアにコンパイラを通した結果が出力されます。

記法がわからない場合は、右上のHELPボタンをクリックすると
簡単な記述例がみられるので、ご参考に。

Lessをこれから始めようという方のお砂場にしてもらえると嬉しいです。

Lessが気に入ったら、GUIクライアントも是非

Lessnium for Windows

LESSTESTERの右下に、拙作のLessniumのバナーもさりげなく置いておきました。
これはWindows向けTitaniumDesktop製のGUIクライアントです。
Windowsユーザーの方は、もしよければ使ってみてください。

TitaniumデスクトップでLESS.jsのフロントエンドをこさえてみた | Mach3.laBlog

Less.app for Mac OS X

Macユーザーの方は、優秀なLess.appがあるのでこちらを是非。

LESS.app For Mac OS X

ちなみに、Windowsでは Notepad++ が使いやすくて重宝してます。

シンタックスファイルを追加する

Vimでは、Sassははじめから使えるのに
Lessのシンタックスファイルはありません。
なので、自分で追加してやらないといけません。

PHPでLessする「lessphp」の作者さんが、
オマケ？として公開してくれているので、こちらを使わせて頂くことに。

lessphp – leaner css in php

「Resources」の「Vim syntax file」から取得出来ます。
取得したless.vimは ~/.vim/syntax に保存。
これで、VimでLessファイルのシンタックスを色分けしてくれるようになったはず。

適当なLessファイルをひらいて

setf less

とかしてテストしてみましょう。

.lessファイルを関連付けする

.vimrc等で、lessファイルの関連付けをしてあげます。

" Less
au BufNewFile,BufRead *.less            setf less

これで拡張子が.lessのファイルを開くと、
lessのシンタックスハイライトが適用されてます。やったね！

less.vimが見つからなかった時は

Sassに比べていささかマイナーなツールではあるので、
そのような事もひょっとしたらあるかもしれません。
そんな時は、Sassの記法がかなり近いのでそちらを編集して使ってみてもよいかも。

基本的には複製させていただき、
変数の書き方だけLessに合わせておきます。

$ cd /Applications/MacVim.app/Contents/Resources/vim/runtime/syntax/
$ cat sass.vim > less.vim
$ vim less.vim

sass.vim を複製した less.vim を開き、

syn match sassVariable "$[[:alnum:]_-]+"
syn match sassVariableAssignment "%([!$][[:alnum:]_-]+s*)@<=%(||)==" nextgroup=sassCssAttribute skipwhite
syn match sassVariableAssignment "%([!$][[:alnum:]_-]+s*)@<=:" nextgroup=sassCssAttribute skipwhite

この部分の$を@に書き換える。

syn match sassVariable "@[[:alnum:]_-]+"
syn match sassVariableAssignment "%([!@][[:alnum:]_-]+s*)@<=%(||)==" nextgroup=sassCssAttribute skipwhite
syn match sassVariableAssignment "%([!@][[:alnum:]_-]+s*)@<=:" nextgroup=sassCssAttribute skipwhite

また、ファイル先頭のコメントの部分は、
適当にSassをLessに変更するなどしておきましょう。
これで、setf lessすればLessファイルとしてカラーリングされるようになるはずです。

一部の記法（Mixinとか）はSassとLessで異なるので反映されませんが、
個人的には変数とネストだけ反映されれば十分です。

「公開されているless.vimを紹介しておきながらなんでわざわざ？」と思われましたか？
…苦し紛れのコレを書いてる時にやっとless.vimを見つけたんだからしょうがない。

Less.appは素敵ですよ

いずれ改めて紹介しようとは思ってますが、
MacOSで使える LESS.app For Mac OS X は素晴らしいです。
フォルダごとに管理も出来るし、出力先のパスも指定できる。
Lessniumもこれくらい気の利いたツールにしてみたい…