&tag(LESS); *目次 [#y966162e] #contents *参考情報 [#j03187c5] -[[LESS « 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> }}