LESS の履歴(No.3) - src256 wiki

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
LESS へ行く。
- 1 (2013-05-10 (金) 02:24:31)
- 2 (2013-05-10 (金) 02:29:05)
- 3 (2013-05-10 (金) 06:48:41)

Tag: LESS

目次†

目次
参考情報
ローカルで動作確認する
- ローカルjsで動作確認

↑

参考情報†

↑

ローカルで動作確認する†

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

↑

ローカルjsで動作確認†

style.lessを次の内容で保存。単に@colorという変数を使った例。
```
@color: red;

#header {
  color: @color;
}
h2 {
  color: @color;
}
```
less-1.3.1.min.jsを同じ場所に保存。

sample.htmlを次のよう内容で保存する。そうするとh2が赤色の文字で表示される。

<!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>