今回は、すでに宣言されている色や数字を計算する方法をご紹介します。

もちろん、頭の中や他のツールを使って計算することもできるのですが、それをLESSで行うメリットがあります。

カラー関数で色の変更に柔軟に対応する

CSSにおいて、色の扱いは非常に融通のきかない、厳格なものです。

たとえばデザインをする際、グラフィックソフト上では基準色に対して

• 「色相を少しずらす」
• 「明度を少し明るくする」

といった形で色を作ることがあるでしょう。

しかし、最終的にはその色を直接CSSに記述する必要があります。そのため、基準色が変更になれば、それに伴いほかの色もすべて変更する必要がありました。

LESSではそのようなケースに柔軟に対応するために、色を演算する機能があります。それがカラー関数です。

カラー関数では、色の三属性である

• 明度（hue）
• 彩度（saturation）
• 色相（lightness）

さらに

• 透明度（alpha）

を加えた4種類の値を、加算や割合で計算することができます。

カラー関数の使い方

まずは、明度・彩度・色相を調整するための記述法を見てみましょう。

lighten(@color, 10%);     //@colorより10％“明度が高い”色を計算する
darken(@color, 10%);     //@colorより10％“明度が低い”色を計算する

saturate(@color, 10%);     //@colorより10％“彩度が高い”色を計算する
desaturate(@color, 10%);     //@colorより10％“彩度が低い”色を計算する

spin(@color, 10);     // @colorより10度“色相が大きい”色を計算する
spin(@color, -10);     // @colorより10度“色相が小さい”色を計算する

使用例として、ボタンなどをCSSで描画するときに、グラデーションをかける場合を考えてみましょう。

上から下に、明るいオレンジ（#FF3300）から明度が20％暗いオレンジへ変化すると想定します。

@color: #FF3300;

#foo {
     background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          from(@color),
          to(darken(@color, 20%))
     );
}

CSSでは本来、fromとtoの値に色のコードを直接記述します。一方上記の例では、@colorで一度色宣言を行い、それを元にtoの値を計算しています。

なぜこのような記述をしているのでしょうか？

もちろん、計算された数値を直接記述しても表示される結果は変わりません。

しかし、もしボタンの色を変更したくなった場合どうでしょう？

再度基準色とその20％暗くした色を計算して宣言しなおす必要があります。

darken関数を使うのは、もしボタンの色を変更したくなった場合でも、@colorの値のみを変更すれば、同じ度合いのグラデーションを作れるからです。

これをmixinとして利用し、@colorを引数に渡すようにすれば、同じサイト内で色違いのボタンを配置するのもとても楽になるうえ、ミスも少なくなりますね。

「明度と彩度は同じで、色相のみを変更したカラーパターンを作る」

といったデザインにも有効です。

透明度を調整する

筆者の利用頻度が一番高いカラー関数は「透明度を調整する」ものです。

これはカラー関数の中で最重要項目です！

CSS3では、今までのrgb値に透明度（アルファ値）を加えた、「⁠rgba」というカラーコードを指定できるようになりました。

• rgb(255,255,0) → rgba(255,255,0,0.5)

最後の「0.5」という値が透明度の指定です。

なぜ透明度を調整するこの関数の利用頻度が高いかといえば、このrgbaの値を一般的な16進数のカラーコードから計算できるからです。

fadein(@color, 10%);      // @colorより10％“透明度が高い”色を計算する
fadeout(@color, 10%);     // @colorより10%“透明度が低い”色を計算する
fade(@color, 50%);        // @colorの50％の透明度を持つ色を計算する

最後の「0.5」という値が透明度の指定です。

これにより、背景透過をするためのpngファイルなどをわざわざ用意する必要はなくなりますし、CSSのみで透明度を持たせたグラデーションを描画することもできるようになりました。

しかし、CSS3では、rgb値をもとにしたrgbaでしか透明度を指定できません。そのため、何らかのツールを用いて、一般的な16進数のコードをrgb値に変換する必要があります。

そこで、透明度調整をするカラー関数の出番です。

CSSでは「#FF3300の50%透過の値」を指定する場合、以下のように一度rgb値に置き換えてからCSSに記述します。

#FF3300

→（⁠rgb値に変換）

→rgb(255,51,0)

→（⁠50％の透過）

→rgb(255,51,0,0,5);

一方、LESSのカラー関数を用いれば、以下のようにわざわざrgb値を調べないでも、16進数のコードをそのまま使って透明度を設定できます。

#FF3300

→（⁠50％の透過）

→fade(#FF3300,50%)

ツールもいらず、とても楽ちんですね。

fadein()、fadeout()は、基本色を決めてある状態の相対変化を示すのに向いています。たとえば前述のグラデーションのような場面で、fade()は16進数のカラーコードを使う感覚でrgbaを指定できるため、筆者は背景色の指定などによく使っています。

ちなみに、fadein()／fadeout()も、前述のlighten()やsaturate()のように、マイナスの値を挿入することができます。

Math関数で小数点以下の数値を効率的に扱う

CSSでは、基本的に小数点以下の数値を扱うことができません（%やemなどはのぞく⁠）⁠。

小数点以下の数値に対して切り上げ／切り捨て／四捨五入を行ってくれるのがMath関数です。

round(1.67);     // 1.67の小数点以下1桁を四捨五入 → 2
ceil(2.4);     // 2.4の小数点以下1桁を切り上げ → 3
floor(2.6);     // 2.4の小数点以下1桁を切り下げ → 2
percentage(0.5);     // 0.5をパーセントに変更 → 50%

これらは普段使う場面を想像しにくいかもしれません。

「round(1.67)」と書くよりも、頭の中で計算して「2」と書いてしまったほうが楽ですからね。

こういった関数は「計算を楽にする」という目的だけでなく、前回ご紹介したmixinで渡された引数を計算する時に力を発揮します。

引数ではどんな数字が渡されるかわからないため、計算結果が小数になることがよくあります。たとえば100pxの幅のオブジェクトの中に、3つのオブジェクトを等分に、横に並べたい場合、33.3333……pxのようになります。これはCSSでそのまま記載できないので、困ってしまいますね。

それらをCSSの値として用いるためには

• 「1つ目のオブジェクトは34pxで」
• 「それ以外のオブジェクトは33px」

などの計算が必要になりますが、そういった処理もうまくMath関数を利用するとかんたんに書けるようになります。

//LESS
@sectionWidth: 100px;
@cells: 3;

ul {
        width: @sectionWidth;

         li {
                width: floor(@sectionWidth/@cells);

                &:first-child {
                        width: ceil(@sectionWidth/@cells)
                }
         }
}


/* Compiled CSS */
ul {
        width: 100px;
}
ul li {
        width: 33px;
}
ul li:first-child {
        width: 34px;
}

今回の例では、@sectionWidthや@cellsの値が変わった場合、うまく計算できない場合が出てきます。しかしこれらも、次回以降で紹介していく応用テクニックを使えば対応できます。

そうしたmixinの作り方は、本連載で徐々にご紹介していきます。まずは数値計算に便利な「Math関数」というものがあることを覚えておいてください。

今回ご紹介した色や数値の計算は、決して派手な機能ではありません。しかし、保守性／汎用性を持たせることに欠かせない、小粒でもピリリと辛いような、気の利いた記法であると言えるでしょう。

これらは今後mixinを作っていく段階でキモとなってきます。ぜひ覚えておいてください。

次回は宣言された文字列を編集・置き換える方法などをご紹介します。ぜひお楽しみに！