SASSのmix関数で透過色を再現しよう

画像の透過色の再現

Adobe XDなどのデザインソフトウェアでは、透過したオブジェクトを簡単に作成できます。

XDだとこんなやつ

通常のやり方としては背景色に対して透過色を設定することです。たとえば以下のようにCSSで書くことができます。

p {
  background: rgba(#000, .7);
}

透過している色を知りたい場合、スポイトで色を取得しても透過する前の元の色が取得できるだけで、実際に見えている色は取得できません。

SASSのmix関数を使う

SASSのmix関数を活用することでこの問題を解決できます。この関数は、2つの色を混ぜ合わせて新しい色を生成します。混合比は3つ目の引数で指定します。

1. 背景色を第一引数に指定（例： #fff）
2. オブジェクトの色を第二引数に指定（例： #000）
3. 透過度を第三引数に指定（例： 30%）

scss

p {
  background: mix(#fff, #000, 30%);
}

これにより、ブラウザでは計算された色が出力されます。

css

p {
  background: #4d4d4d;
}

このように、SASSのmix関数を使うことで画像の透過色を正確に再現することができます。
コードの透明性を維持しつつデザインの意図を正確に伝えることが可能になります。