レイアウト中に「ここをもう少し明るい色に」とか「ここを少し広くしたら」などということがあります。そんなとき、元の値を残したまま、その値を加減乗除して試すことができる計算式が便利です。
このサンプルでは、ボックスの背景色と幅、高さを変数定義し値を増減しています。
@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倍にしてさらに明るく */
}<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>
