LESS入門!LESSの使い方と導入方法を解説

less

LESSの開発スタイルは大きく3種類の方法があります。1つ目はnode.jsを使ってサーバサイドでビルドする方法。2つ目はless.jsを使ってブラウザでビルドする方法。3つ目はツールを使ってローカルでビルドする方法

今回は2つ目と3つ目をピックアップして解説していきます!

[スポンサーリンク]

このページでやること

less.jsを使って、Webサイト上で直接LESSを使う方法を解説します。
ローカルでLESSを一度コンパイルして、CSSを生成する方法を解説します。

less.jsの導入方法

まずは以下のサイトからless.min.jsをダウンロードします。
less-install-1

less.min.jsをHTMLに導入する前に、CSSの代わりにLESSファイルnew.lessを用意しておきます。

@color: #ff0000;
@bgcolor: #000000;      

.default-font {
    color: @color;
    font-size : 20px;
}

.header {
    .default-font;
    background-color: @bgcolor;
}

ダウンロードしたless.min.jsと先ほど作成したLESSファイルを以下のようにHTMLにセットします。

<html>
	<head>
	<link rel="stylesheet/less" type="text/css" href="new.less">
	<script src="less.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="default-font">
		文字が赤くなります。
		</div>
	</body>
</html>

ただし、ブラウザによってはLESSファイルが未対応のものがあります。
わたしがローカルで確認したところ、Chromeでは表示できませんでした。
firefox safariを使ってためしてください。

ローカルでLESSをコンパイルする方法

LESSはツールさえあれば、いつでもどこでもコンパイルが可能です。
SassのようにRubyを入れて環境を作って・・・という必要はありません。

当ブログでも紹介しました、Crunchを使ってLESSからCSSへコンパイルしてからHTMLで使っていきます。
LESSの実装に便利なエディタ「Crunch」を紹介します。

こちらのLESSファイルをCrunchでコンパイルしてみて下さい。

@color: #ff0000;
@bgcolor: #000000;      

.default-font {
    color: @color;
    font-size : 20px;
}

.header {
    .default-font;
    background-color: @bgcolor;
}

このようにCSSが生成されるので、あとはHTMLで通常のCSSと同じように読込めばOKです。

/* CSS crunched with Crunch - http://crunchapp.net/ */
.default-font {
  color: #ff0000;
  font-size: 20px;
}
.header {
  color: #ff0000;
  font-size: 20px;
  background-color: #000000;
}

さいごに

LESSをそのまま使う方法は、ブラウザ依存してしまうのであまり好ましくないように感じます。
とはいえ、開発段階で毎回ビルドするのも効率が悪そうなので、開発中はそのまま使って本番ではCSSへビルドするって方法がとれれば一番いいですね。
それでは!