LESSで3倍ラクするスマートフォンコーディング

第4回 LESS記法について(中級編:色と数値の計算)

この記事を読むのに必要な時間:およそ 3 分

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

もちろん,頭の中や他のツールを使って計算することもできるのですが,それを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度“色相が小さい”色を計算する

spinのみ,割合の値の単位が%ではないので注意

使用例として,ボタンなどを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を引数に渡すようにすれば,同じサイト内で色違いのボタンを配置するのもとても楽になるうえ,ミスも少なくなりますね。

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

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

コラム 使う関数を決めてコードを共通化する

明度はlighten()とdarken(),彩度はsaturate()とdesaturate()と,それぞれ値を増やすための関数と下げるための関数が決まっています。

一方で「色相は増減ともにspin()だけでいいのはなぜ!?」と思わなかったでしょうか。

じつは,これらの値にはspin()と同様(?)⁠-⁠マイナス)の値を入れることもできます。つまり,以下の2つは同じカラーコードになります。

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

ということは,以下のように覚えればいいですね。

  • 明度ならlighten()
  • 彩度ならsaturate()
  • 色相ならspin()

コードの記述法を共通化する意味でも,この3つで統一するというルールを定めてもいいかもしれません。

著者プロフィール

宇野雄(うのゆう)

UI・UXデザイナー。

ヤフー株式会社にて,主にスマートフォンWebとアプリのUI・UX設計/デザイン/コーディングを担当。

全く新しいモノづくりよりも,既にあるモノを新しい視点でとらえるデザインが好き。犬派。

Twitter:@saladdays

コメント

コメントの記入