WEBOPIXEL

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

Posted: 2012.04.17 / Category: HTML&CSS / Tag: 

LESSにはMixinという複数のプロパティをまとめる機能があります。
例えばcss3のベンダープレフィックスなど設定しておけば、あとで1行で呼び出すことができます。
で、実際作成するにあたり一から作るより Twitter Bootstrap を利用すれば、よく使いそうな機能があらかじめまとまってるのでいいかもしれないです。

Sponsored Link

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));
	

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

.border-radius() @radius: 5px
.box-shadow() @shadow: 0 1px 3px rgba(0,0,0,.25)
.transition() @transition
.rotate() @degrees
.scale() @ratio
.translate() @x: 0, @y: 0
.background-clip() @clip
.background-size() @size
.box-sizing() @boxmodel
.user-select() @select
.resizable() @direction: both
.content-columns() @columnCount, @columnGap: @gridColumnGutter

グラデーション

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

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

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

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

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

横方向は「horizontal」です。

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

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

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

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

#translucent > .background() @color: @white, @alpha: 1
#translucent > .border() @color: @white, @alpha: 1
#gradient > .vertical() @startColor, @endColor
#gradient > .horizontal() @startColor, @endColor
#gradient > .directional() @startColor, @endColor, @deg
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor
#gradient > .radial() @innerColor, @outerColor
#gradient > .striped() @color, @angle
#gradientBar() @primaryColor, @secondaryColor

ユーティリティー系

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

.clearfix() clearfixはhtml側でクラスを指定するのが普通ですが、cssでも一行でいけます。
.center-block() ボックスのセンター配置。
.text-overflow() flortでテキスト配置したときに回り込まないようにするやつ。
.hide-text() 画像置き換えするときに「-9999px」しないやつ。
.opacity() 「.opacity(50)」で半透明。
.size() 「.size(200px, 300px);」で 「width:200px; height: 300px」
.square() 正方形にするならこちら。

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

Using LESS with Bootstrap

COMMENTS

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。