rgba()のエミュレートにはadjust-rgb()だけでは不十分なので、ちゃんと背景色と混ぜるmixxd()という関数を作りました。mix()の第三引数が小数のバージョンで、xdはBy Decimalの略です。ユーザー定義関数のうまい命名規則欲しいなぁ……。
@function mixxd($color-1, $color-2, $weight: 0.5) {
$percentage: percentage(1 - $weight);
@return mix($color-1, $color-2, $percentage);
}rgba()やtransparentize()と同じ小数を引数に取ることが出来るので、%を引数に取るmix()よりも混乱しにくいんじゃないかと思います。
$bg: #f9f6f0;
body {
background-color: $bg;
> footer {
background-color: mix(black, $bg, 0.9);
background-color: transparentize(black, 0.9);
// background-color: rgba(0, 0, 0, 0.9);
}
}第一引数でベースになる色、第二引数で混ぜる対象の背景色、第三引数で混ぜる割合を指定して使います。割合は0に近づくほどベースになる色に近づき、1に近づくほど混ぜる対象の背景色に近づくので、rgba()の透過率とほぼ同じと考えてください。小数点以下の扱いがSass任せなので完全に一致はしませんが、ほぼ同じような色合いになると思います。背景画像と混ぜる場合は……まぁ頑張って工夫してください。
mix()で小数が通るということに気づいて「うわ無駄なことした……」とか一瞬思ったんですが、そんなことはなかったので良かったです。
$ sass -i >> mix(black, white, 0.1) #fefefe >> mix(black, white, 0.1%) #fefefe >> mix(black, white, 0.9) #fcfcfc >> mix(black, white, 0.9%) #fcfcfc
インタラクティブ・モードで試すとこういう感じなので、通ることは通るんですが%とみなされている感じですね。エラー吐かないのはバグでしょう。