Tag: LESS

目次

参考情報

ローカルで動作確認する

ローカル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>
    

コンパイル方法

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

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-04-13 (水) 16:46:11 (1072d)