今回は計算がメインのエントリーとなります。RGBA 値のバラバラな値を、16 進数のカラーコードに変換してみます。
いきなりですが、完成したソースを見てください。
/*----------------------------------------------------------
16進数に変換する
----------------------------------------------------------*/
@function to16String($num) {
@if (0 <= $num and $num <= 9) {
@return $num;
}
@else if ($num == 10) { @return A; }
@else if ($num == 11) { @return B; }
@else if ($num == 12) { @return C; }
@else if ($num == 13) { @return D; }
@else if ($num == 14) { @return E; }
@else if ($num == 15) { @return F; }
@return null;
}
@function to16($num) {
$result: null;
// $numを四捨五入で整数にする
$num: round($num);
// 値は0から255で収める
@if ($num > 255) {
$num: 255;
}
@else if ($num < 0) {
$num: 0;
}
// 16進数に変換する
@while ($num != 0) {
$result: #{to16String($num % 16)}#{$result};
$num: $num / 16;
$num: floor($num); // 小数点切り捨て
}
@return $result;
}
/*----------------------------------------------------------
rgbaを16進数表記に変換する
----------------------------------------------------------*/
@function rgbaTo16($red, $green, $blue, $alpha) {
@return #{"#"}#{to16($red)}#{to16($green)}#{to16($blue)}#{to16($alpha*255)};
}
使い方は簡単で、以下のように使います。
$color: rgbaTo16(255,255,255,0.5);
このように書くと、アルファ値を含めた # 付きの 16 進数が返ってきます。直接 color などのプロパティに指定できます。
ソース内容の解説
では中身を見てみましょう。まず、ユーザが触るインターフェースである rgbaTo16 関数を見てみます。
@function rgbaTo16($red, $green, $blue, $alpha) {
@return #{"#"}#{to16($red)}#{to16($green)}#{to16($blue)}#{to16($alpha*255)};
}
処理としては単純な作りとなっています。一つずつ引数を 16 進数に変換して、全てくっつけているだけです。アルファ値の可変域は「 0.0 ～ 1.0 」であるため、「 0 ～ 255 」に変更するため 255 を掛けています。次は to16 関数を見てみます。
@function to16($num) {
$result: null;
// $numを四捨五入で整数にする
$num: round($num);
// 値は0から255で収める
@if ($num > 255) {
$num: 255;
}
@else if ($num < 0) {
$num: 0;
}
// 16進数に変換する
@while ($num != 0) {
$result: #{to16String($num % 16)}#{$result};
$num: $num / 16;
$num: floor($num); // 小数点切り捨て
}
@return $result;
}
この関数が、この処理のキモとなります。16進数に変更するといっても、「 0 ～ 255 」の整数でないと困りますので、 Sass の基本機能である round 関数を使って四捨五入し、小数点以下を切り捨てます。また、値が可変域より大きかったり、小さかったりしないよう調整しています。その後、16 進数に実際に変換していきます。
// 16進数に変換する
@while ($num != 0) {
$result: #{to16String($num % 16)}#{$result};
$num: $num / 16;
$num: floor($num); // 小数点切り捨て
}
この部分が、実際に 16 進数に変換している箇所となります。 @while というループ処理を使用して、16 で割れなくなるまで処理を繰り返します。 16 進数への変換は、16 で割った余りを下の桁として扱います。その時、余りは 0 から 15 になるはずなので 10 以上は A から F まで割り当てます。これを繰り返すわけです。今回は 0 から 255 までの数なので、最大２回まで処理が繰り返されます。
では文字を含めた 16 進数に変換する処理を見てみます。
/*----------------------------------------------------------
16進数に変換する
----------------------------------------------------------*/
@function to16String($num) {
@if (0 <= $num and $num <= 9) {
@return $num;
}
@else if ($num == 10) { @return A; }
@else if ($num == 11) { @return B; }
@else if ($num == 12) { @return C; }
@else if ($num == 13) { @return D; }
@else if ($num == 14) { @return E; }
@else if ($num == 15) { @return F; }
@return null;
}
@if を使った簡単な関数ですね。これが 16 進数に変換する関数の処理内容となります。注目して欲しいのは、関数を全て一つにまとめてしまうのではなく機能ごとに関数を分けていることです。これはプログラミングをしている方にとっては常識とも言えるほどとても大切なことです。このように機能で関数を分けることで流用がしやすくなるのです。例えば、新たに 16 進数に変換する関数を使った関数を作るとします。その時、関数を分けていなかったどうなるでしょうか。そのまま流用することはできませんね。再度関数を分割したり、書き換えたりする必要が出てくるのです。もちろん、考えて作っていたとしても手直しする必要が出てくるかもしれません。その時「こういう風に再利用することがある」と覚えておけば、次に新しい関数を作るときにより汎用性の高いものを作ることができます。効率化、汎用性、考えて Sass のライブラリを作って行きたいですね。