• HTML&CSS
• LESS

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