レイアウト中に「ここをもう少し明るい色に」とか「ここを少し広くしたら」などということがあります。そんなとき、元の値を残したまま、その値を加減乗除して試すことができる計算式が便利です。

このサンプルでは、ボックスの背景色と幅、高さを変数定義し値を増減しています。

less-test4.less

@m-bgcolor: #cc66cc;  /* ボックスの背景色 */
@m-width: 300px;  /* ボックスの幅 */
@m-height: 100px;  /* ボックスの高さ */

	/* ---- box1(基本形のボックス ---- */
.m-box	{  
  	width: @m-width;
  	height: @m-height;
	background-color: @m-bgcolor;
	padding: 10px;
  	margin: 10px auto;
}
	/* ---- box2 ---- */
.m1	{ 
	width: @m-width * 1.5;  /* 幅を1.5倍に */
	background-color: @m-bgcolor + #222222;
		/* 背景色の値に#222222をプラスして明るく */
}
	/* ---- box3 ---- */
.m2	{
	width: @m-width * 2;  /* 幅を2倍に */
	height: @m-height * 1.5;  /* 高さを1.5倍に */
	background-color: @m-bgcolor * 2;
		/* 背景色の値を2倍にしてさらに明るく */
}

html(ボックス部分)

<div class="m-box"><b>box01</b><br>
	width: @m-width;<br>
	height: @m-height;<br>
	background-color: @m-bgcolor;
</div>
<div class="m-box m1"><b>box02</b><br>
		width: @m-width * 1.5;<br> 
		height: @m-height;<br>
		background-color: @m-bgcolor + #222222;
</div>
<div class="m-box m2"><b>box03</b><br>
	width: @m-width * 2;<br>
	height: @m-height * 1.5;<br>
	background-color: @m-bgcolor * 2;
</div>

テストページ(4)(新規タブ、または新規ウィンドウで開きます)

LESSのウェブサイト:http://lesscss.org/
戻るボタン