Color 型変数の定義方法

CSS では下記のような色の指定方法があります。

color: red;                      // 定数名で指定
color: #ff0000;                  // 16進数で指定
color: rgb(255, 0, 0);           // 10進数で指定
color: rgba(255, 0, 0, 0.3);     // 10進数で指定（α値あり）
color: hsl(0, 100%, 50%);        // HSL指定
color: hsla(0, 100%, 50%, 0.3);  // HSL指定（α値あり）

CSS の rgba 関数は、上記のように4つのパラメータをとりますが、Sass の rgba 関数はより柔軟なパラメータ指定が可能になっています。

color: rgba(red, 0.3);       // 定数名 + α値
color: rgba(#ff0000, 0.3);   // 16進数 + α値

また、Sass では名前付きパラメータを使って値を指定できるので、各パラメータの意味を明確にすることができます。

color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);  // 赤になる

色を調整するための関数

明度を調整する lighten() / darken()

lighten 関数、darken 関数を使用すると、ある色をパーセンテージ指定で明るくしたり暗くしたりすることができます。

彩度を調整する saturate() / desaturate()

saturate 関数、desaturate 関数を使用すると、ある色の彩度をパーセンテージ指定で上げたり下げたりすることができます。

2つの色の中間色を作成する mix()

mix 関数を使用すると、指定した2色の中間色を作成することができます。 第3引数（$weight パラメータ）を使って、1色目の比率を指定することもできます（デフォルトは 50%）。