CSSメタ言語『LESS』を簡単に使い始められるテンプレートを作りました!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

LESS のことは知ってはいるけど, 使っていない. そろそろ触ってみようかなぁ〜って人向けのエントリーです.

LESS 用のスタートアップテンプレートを作りました. ダウンロードするだけで LESS を使った Web サイトを開発する環境が揃います.

Demo Download

Table of contents

LESS を実行する方法

LESS は CSS 変換して使います. CSS への変換には静的に変換する方法と実行時に動的に変換する方法の2通りあります.

実行時に変換するには LESS の公式サイトから less.js をダウンロードして script タグで読み込みます.

そして css と同じように LESS のファイルを読み込みます. するとページ読み込み時に LESS を CSS に変換してくれます.

<script src="less-1.3.0.min.js"></script>
<link rel="stylesheet/less" type="text/css" href="style.less" />

今回のテンプレートでも上記の方法を採用しています.

up

スタートアップテンプレートの内容

ダウンロードしたフォルダには 下記のようなデータが入っています.

  • index.html … ここに HTML を書き込んでいきます.
  • style.less … ここに LESS のコードを書き込んできます.
  • lib
    • less
      • less-1.3.0.min.js … LESS を CSS に変換する為のスクリプト
    • tmlib
      • tmlib.less … 汎用的に使える mixins をまとめてます. よかったら import して使って下さい.

index.html と style.less を色々と修正して使って下さい.

up

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。