LESS

&tag(LESS);

目次†[edit]

参考情報†[edit]

• LESS « The Dynamic Stylesheet language…公式サイト
• 「LESS＆専用エディター」でCSSをシンプルに書こう - ＠IT
• CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
• ASCII.jp：CSSの記述が3倍速くなる「LESS」の使い方 (1/2)

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

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

ローカルjsで動作確認†[edit]

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

コンパイル方法†[edit]

• lesscコマンドをインストール。npmに-gをつけないと、カレントディレクトリ以下にインストールされる。

  npm install less

• lesscでlessファイルを展開。

   ./node_modules/less/bin/lessc style.less
  #header {
    color: #ff0000;
  }
  h2 {
    color: #ff0000;
  }
  

• 標準出力出力されるので、例えばstyle.cssとかにリダイレクトすればよい。

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

最新の20件