CSS
less

[LESS] LESSことはじめ

あらまし

遅れ馳せながら、LESSを使ってみたぁい!!
ということで、基本的なところを押さえようとしておるところでございまして。

前提

  • less.jsを使う。
  • style.lessはstyle.cssから拡張子を変えてごにょごにょする。

書き方

hoge.html
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

と、まぁ、この辺のことはね、検索したらぽんぽこ出てくるんですわ。
ただひとつ、引っ掛かったことがあって。

hoge.css
@CHARSET "UTF-8";

これ。
CSSファイルの文字コードを指定するやつ。

普通にCSSとして使ってたときにはむしろ必要なものやったはずやのに、こいつのせいでエラーを吐きよる…あかん…あかんでぇ… (:3_ヽ)_ .

んで、こう言われますねんわ。

ParseError: Unrecognised input

と。
「変換しよおもたけど、なんや認識でけへんもんあんねんけど?」って。

多少LESSをかじったあとの人ならわかりはりまっしゃろ?
これ、「変数と誤解されておかしなことになってる」ってスンポーちゃいまっか?と。

というわけで…

全部消したれ ( ・`ω・´)www

結局のところ、Parseのときに邪魔になるわ、Parse後の出力時はHTML自体のCharsetに準拠するわってことで…いらへんのですわ。

チャンチャン♪

あ、注意としては…
消すのは「対象とするすべてのファイル」なんで、見落とさへんように。
そう、コンパイルの対象とするなら、CSSファイルからも除去する必要があるってことですわ。

hoge.html
<!-- 対象 -->
<link rel="stylesheet/less" type="text/css" href="styles.css" />
<!-- 非対象 -->
<link rel="stylesheet" type="text/css" href="styles.css" />

…むつかしわぁ (´・ω・`)