透明度も変化量で指定できる
LESSでは、明度・彩度・色相だけでなく、透明度も変化量で指定できます。例えばベースの色（@basec）に対して、fadein関数を使って透明度を減らしたり、fadeout関数を使って透明度を増やしたりできます。透明度を10％減らす： fadein(@basec, 10%); 透明度を30％増やす： fadeout(@basec, 30%);
ベースの色から透明度を増減
- div要素には、透明度を20％減らした色を、
- p要素には、透明度を15％増やした色を
@basergba: rgba(204, 68, 34, 0.5);
div { color: fadein(@basergba, 20%); }
p { color: fadeout(@basergba, 15%); }
※「rgba( R, G, B, A )」は、CSSでの透明度を含めた色の指定方法です。赤(R)・緑(G)・青(B)の3つは0～255の値で指定し、透明度(A)は0～1の範囲で小数で指定します。0が完全に透明で、1が完全に不透明です。0.5なら、ちょうど半透明になります。上記のLESSソースは、以下のようにCSSを記述した場合と同様の効果があります。
div { color: rgba(204, 68, 34, 0.7); } /* 透明度を20%減少 */
p { color: rgba(204, 68, 34, 0.35); } /* 透明度を15％増加 */
透明度の指定は、CSSに元々ある「opacityプロパティ」でも指定可能です。ですから、単純に透明度を付加させるだけが目的なら、ここでの透明度の指定は、それほどのメリットはないかもしれません。上記のサンプルのように、ベースの色に最初から透明度が指定されているときに、さらに透明度を増減させたい場合に有効です。
※透明度を指定するopacityプロパティや、透明度（アルファチャンネル）を付加した色（RGBA色）の指定方法に関しては、記事「IE9を含む代表的なブラウザで使えるCSS3プロパティ」の3ページ目でも例と共に紹介しています。併せてご参照下さい。
色の足し算・引き算
2つの色を足したり引いたりできる
右図のように、「#ff8080」という色（A）と、「#556622」という色（B）があるとき、
- AとBを足した色をdiv要素に指定し、
- AからBを引いた色をp要素に指定指定する
@basecolor1: #ff8080; /* ←変数を定義 */
@basecolor2: #556622; /* ←変数を定義 */
div { color: @basecolor1 + @basecolor2; } /* 足す */
p { color: @basecolor1 - @basecolor2; } /* 引く */
この場合の計算は、赤（R）・緑（G）・青（B）のそれぞれの色の値に対して、個別に足し算・引き算が行われます。例えば「#ff8080」に「#556622」を足す場合は、赤が「ff＋55」で（素直に足せば154ですが、色の最大値はffなので）「ff」になり、緑が「80＋66」で「e6」になり、青が「80＋22」で「a2」になります。
色を「変化量の割合」で相対的に指定できると便利
今回は、ベースの色からの変化量で「相対的に色を指定する方法」として、CSSメタ言語「LESS」を活用する方法をご紹介致しました。配色の試行錯誤にとても便利ですから、ぜひ活用してみて下さい。なお、LESSに関して詳しくは、記事「CSSを効率的に記述できるメタ言語「LESS」の使い方」で解説していますので、ご参照下さい。色の指定以外にも、既存のCSSではできない様々な便利な仕様があります。
