2011-12-25

adjust-rgb()というSassの関数を作った

Sassには色調節の関数が色々用意されています。その中にadjust-color()というRGBとHSLで色を割合ではなく指定量だけ調節できる汎用関数があるんですが、RGBをそれぞれ同じ量だけ明るく(暗く)したい時の引数指定が面倒です。というわけでそれをラップするadjust-rgb()という関数を作ってみました。

@function adjust-rgb($color, $dec: 1) {
  $num: 255 * $dec;

  @return adjust-color($color, $red: $num, $green: $num, $blue: $num);
}

第一引数で色を、第二引数で係数を指定します。係数は-1から1の間で、負の値を指定すると黒に近くなり、正の値を指定すると白に近くなります。

.test {
  color: adjust-rgb(#369, 0.2); // returns #69c
}

transparentize()と引数を共通にしたので、transparentize()の(返すrgba()の)フォールバックに使うと便利です。というかそのために考えました。

.test {
  background-color: adjust-rgb(#090909, 0.9);
  background-color: transparentize(#090909, 0.9);
}

背景色が白(か黒)に近くないと意味無いのでもうちょっとなんとかしたいんですが、面倒になったところです。