Sassメモ：rgba()値を簡単に出す

.box {
  background: rgba(255,255,102,0.5);
}

rgba()を使った色指定は簡単に半透明も含められるので便利ですが、16進数の色コードに慣れているとRGB値で書くのは結構手間です。

Sassならば16進数色コードのままで書いてもRGB値に変換されます。

.box {
  background: rgba(#ffff66,0.5);
}

これで前者と同じCSSで出力されます。

もちろん変数も利用できます。

$color: #ff6;
.box {
  background: rgba($color,0.5);
}