LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利

LESSの基本的なことはこちらの記事を参考にしてください。

CSSをシンプルに書くことができるLESS使ってみた

ダウンロード

lessファイルはGitHubからダウンロードします。
使用するのは「less」→「mixins.less」

twitter/bootstrap · GitHub

使い方

使用するlessファイルと同じ階層に「mixins.less」を配置して、ファイルの先頭に以下を追加します。

less

	@import "mixins.less";
	

css3プロパティ

準備ができたところで早速使ってみましょう。
最初はCSS3で追加された「border-radius」で角丸にしてみます。
たとえば「id="box1"」でマークアップした「div」があります。

html

	<div id="box1"></div>
	

通常のcssでしたら次のようになりますよね。

css

	#box1 {
		width: 200px;
		height: 200px;
		background: #999;
		/* 角丸 */
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	

Bootstrapのmixins.lessをインポートすれば次のように記述することができます。

less

	@import "mixins.less";
	#box1 {
		width: 200px;
		height: 200px;
		background: #999;
		.border-radius();
	}
	

角丸にしてるのは最後の「.border-radius();」です。
角丸は初期値（何も指定しない）で5pxになってます。
この値を変更したい場合は「()」の中に好きな数値を入れます。

	.border-radius(25px);
	

ボックスシャドウも同じ感覚で使用できます。

	.box-shadow(5px 5px 10px rgba(0,0,0,0.3));
	

その他は以下の表を確認ください。

グラデーション

css3のグラデーションは結構複雑なものも作れますが、よく使用するのは単純な２点とか３点のグラデーションがほとんどですね。
Bootstrapには単純なグラデーションを作成するmixinがあります。

基本的な２点の縦方向グラデーションは次のように指定します。

	#gradient > .vertical(#ccc, #333);
	

3点の場合2点目のカラーの次に位置を設定します。

	#gradient > .vertical-three-colors(#ccc, #fff, 50%, #333);
	

横方向は「horizontal」です。

	#gradient > .horizontal(#ccc, #333);
	

「radial」だと円タイプのグラデーションです。

	#gradient > .radial(#ccc, #333)
	

その他は以下の表を確認ください。

ユーティリティー系

css3以外にもよく使うプロパティはUtilitiesとしてまとめられています。

その他まだいろいろありますので下記公式ページか、mixinsファイルをご確認ください。

Using LESS with Bootstrap