Hail2u.net

mixxd()というSassの関数を作った

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

インタラクティブ・モードで試すとこういう感じなので、通ることは通るんですが%とみなされている感じですね。エラー吐かないのはバグでしょう。