同じ色相で、様々な色のパターンを作るのに便利な HSLA という CSS3 の機能があります。 HSLA の指定を RGBA に変換する、なんてことも Sass ではできてしまいます。 HSLA に対応しているブラウザは以下となります。

なぜわざわざ変換するのか？

HSLA で記述した CSS3 に対して、ブラウザが対応していなかった場合の回避方法は複数あります。 JavaScript で CSS3 の記述を RGB などに変更する、もしくは RGB に変換するサービスを利用して一旦 RGB 値に変更後、 CSS として記述するよう修正する、などです。このように修正する必要があるのも、 HSLA もしくは RGBA に対応していないブラウザの場合、「 HSLA に対応していなかったら RGB 色で表示する」のではなく「色の指定が無視される」からです。つまり、何も指定していないなかったことになります。

　

これを回避し、取り敢えず色は表示できるようにするためには上記の方法で回避するしかありません。しかし、 Sass を使えば予めブラウザ未対応であった場合は変換しておくことができます。その際に必要な HSLA を RGBA に変換する計算を今回作ってみましょう。

HSLA を RGBA に変換する

いきなりですが、ソースをそのまま載せます。計算方法については特に記述しません。こういうものなので、覚える必要もないかと思いますしね。

/*----------------------------------------------------------
hslをrgbに変換する
----------------------------------------------------------*/
@function toRGB($h, $s, $l, $a: 1.0) {
    $r: 0;
    $g: 0;
    $b: 0;

    $l: $l / 100.0;
    $s: $s / 100.0;

    // $hがマイナス値でないようにする
    @while $h < 0 {
        $h: $h + 360;
    }

    $h: $h % 360;

    // 0の場合は色無し
    @if ($s == 0) {
        $l: round($l * 255);
        $r: $l;
        $g: $l;
        $b: $l;

        $result: $r, $g, $b, $a;
        @return $result;
    }

    $m2: 0;

    @if ($l < 0.5) {
        $m2: $l * (1 + $s);
    }
    @else {
        $m2: $l + $s - ($l * $s);
    }

    $m1: $l * 2 - $m2;

    $tmp: $h + 120;
    @if ($tmp > 360) {
        $tmp: $tmp - 360;
    }

    // r:レッド
    @if ($tmp < 60) {
        $r: ($m1 + ($m2 - $m1) * $tmp / 60)
    }
    @else if ($tmp < 180) {
        $r: $m2;
    }
    @else if ($tmp < 240) {
        $r: $m1 + ($m2 - $m1) * (240 - $tmp) / 60;
    }
    @else {
        $r: $m1;
    }

    // g:グリーン
    $tmp: $h;
    @if ($tmp < 60) {
        $g: $m1 + ($m2 - $m1) * $tmp / 60;
    }
    @else if ($tmp < 180) {
        $g: $m2;
    }
    @else if ($tmp < 240) {
        $g: $m1 + ($m2 - $m1) * (240 - $tmp) / 60;
    }
    @else {
        $g: $m1;
    }

    // b:ブルー
    $tmp: $h - 120;
    @if ($tmp < 0) {
        $tmp: $tmp + 360;
    }
    @if ($tmp < 60) {
        $b: $m1 + ($m2 - $m1) * $tmp / 60;
    }
    @else if ($tmp < 180) {
        $b: $m2;
    }
    @else if ($tmp < 240) {
        $b: $m1 + ($m2 - $m1) * (240 - $tmp) / 60;
    }
    @else {
        $b: $m1;
    }

    // 0 ～ 255 のRGB方式に合わせる
    $r: round($r * 255);
    $g: round($g * 255);
    $b: round($b * 255);

    $result: $r, $g, $b, $a;
    @return $result;
}

実際に使ってみたソースは以下になります。

$rgba: toRGB(200, 50, 50, 0.5);

一点、注意するとするならば、従来の CSS3 の HLSL の記述とは異なり「％(パーセント)」を用いずに記述することです。

　

Sass を使えば、このような計算を予めさせておき、 JavaScript に頼らずに実装させることができます。 Sass を使えばこんなこともできますよ、というエントリーでした。