LessでCSSハックはどのようにコンパイルされるのか

CSSハックをLessの中で書くとどうなるのか気になっていたので実験。

• とりあえずIEハックを検証
• ネスト構造が崩れてしまうので、セレクターに何かする系は除外

サンプルコード

.container {
  padding: 10px;
  .h1 {
    _color: red;  // IE6
    color: red9; // IE8
    *color : red; // IE6, IE7
    /color: red; // IE6, IE7
    color/***/: red9; // IE7, IE8
    color : red\9; // IE6, IE7, IE8
  }
}

コンパイル

lessc sample.less sample.css

以下2行でパースエラーが出た。

/color: red; // IE6, IE7
color/***/: red9; // IE7, IE8

_colorと*colorでエラーが出なかったのが意外。
エラーが出た2行を削除して再コンパイル。

結果

コンパイルを通しても、意図したどおりに出力されている。

.container {
  padding: 10px;
}
.container .h1 {
  _color: red;
  color: red9;
  *color: red;
  color: red\9;
}

とはいえ、CSSハックなんてLessファイルに含めないほうがいいと思う

せっかく変数、演算ができてミックスインも書けちゃうLess.見通しがよくてメンテナンスしやすいCSSが書けるようになったのだから、いつまで使うかわからないCSSハックをその中に入れ込んでしまっていいものなのか。
しかもCSSハックをコンパイルするとどうなるのかなんて覚えるのは時間の無駄だ。正規の方法で書かれていないものはいつどんなところでバグを引き起こすかもわからない。IE6対応なんてコピペで済ましてしまおう。

Lessファイルを複数にして@importで1つのファイルにしてしまい、最後にCSSハックだけを記述したcssファイルを@importする。

style.less
  @import layout.less
  @import header.less
  :
  :
  @import ie.css  

外したいときにいつでも外せる。
上記style.lessをコンパイルしたとき、Lessファイルは展開され、cssファイルはそのまま@importで書き出される。

コンパイル前
style.less

@import "test.less";
@import "test2.css";

コンパイル後
style.css

@import "test2.css";
.container {
  padding: 10px;
}
.container .h1 {

CSSハックを使う機会もめっきり少なくなったけど。