LESS の変更点 - src256 wiki

追加された行はこの色です。
削除された行はこの色です。
LESS へ行く。
LESS の差分を削除
&tag(LESS);
*目次 [#y966162e]
#contents
*参考情報 [#j03187c5]
-[[LESS &#171; The Dynamic Stylesheet language:http://lesscss.org/]]…公式サイト
-[[「LESS＆専用エディター」でCSSをシンプルに書こう - ＠IT:http://www.atmarkit.co.jp/fwcr/design/tool/html5app03/01.html]]
-[[CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞:http://dxd8.com/archives/217/]]
-[[ASCII.jp：CSSの記述が3倍速くなる「LESS」の使い方 (1/2):http://ascii.jp/elem/000/000/668/668205/]]


*ローカルで動作確認する [#ofadf63b]
-Chromeだとローカルのless.jsをインクルードする方法だと動かない(JavaScriptコンソールを表示するとエラーがでていることがわかる)。FirefoxだとOK。
-[[Google Chrome でローカルファイルのJSを実行できるようにする #JavaScript #Chrome #MacOSX - Qiita [キータ]:http://qiita.com/items/4f1ccafe0fa6c7a74c1e]]のように、 --allow-file-access-from-files をつければChromeでもいけそうなのだが、IntelliJから呼ぶとうまく動かない。原因不明なのでFirefoxを使うしかない。

**ローカルjsで動作確認 [#jd4473ce]
-style.lessを次の内容で保存。単に@colorという変数を使った例。
#pre{{
@color: red;

#header {
  color: @color;
}
h2 {
  color: @color;
}
}}
-less-1.3.1.min.jsを同じ場所に保存。
-sample.htmlを次のよう内容で保存する。そうするとh2が赤色の文字で表示される。
#pre{{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>LESSのテスト</title>
    <link rel="stylesheet/less" type="text/css" href="style.less">
    <script src="less-1.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2>aaaaaaaaaaaaa</h2>
</body>
</html>
}}

**コンパイル方法 [#o25a6a3b]
-lesscコマンドをインストール。npmに-gをつけないと、カレントディレクトリ以下にインストールされる。
 npm install less
-lesscでlessファイルを展開。
#pre{{
 ./node_modules/less/bin/lessc style.less
#header {
  color: #ff0000;
}
h2 {
  color: #ff0000;
}
}}
-標準出力出力されるので、例えばstyle.cssとかにリダイレクトすればよい。