Sass カラー関数

Sass 関数

Sass カラー関数は3つの部分に分けられます：カラー設定、カラー取得、そしてカラー操作です。

以下の表は Sass のカラー関数を示しています：

Sass カラー設定

関数 説明 & 例
rgb(red, green, blue) Red-Green-Blue (RGB) 色を作成します。R は "red" で赤色を表し、G は "green" で緑色、B は "blue" で青色を表します。

例：
rgb(0, 0, 255);
rgba(red, green, blue, alpha) 赤、緑、青と透明度の値から色を作成します。

例：
rgba(0, 0, 255, 0.3);
hsl(hue, saturation, lightness) 色相（hue）、彩度（saturation）、明度（lightness）の値から色を作成します。

例：
hsl(120, 100%, 50%); // 緑色
hsl(120, 100%, 75%); // 薄緑色
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // 柔らかい緑色
hsla(hue, saturation, lightness, alpha) 色相（hue）、彩度（saturation）、明度（lightness）と透明度（alpha）の値から色を作成します。

例：
hsl(120, 100%, 50%, 0.3); // 透明度のある緑色
hsl(120, 100%, 75%, 0.3); // 透明度のある薄緑色
grayscale(color) 色をグレーに変換します。desaturate(color, 100%) に相当します。

例：
grayscale(#7FBFFF);
結果: #c6c6c6
complement(color) 補色を返します。adjust-hue($color, 180deg) に相当します。

例：
complement(#7FBFFF);
結果: #ff7faa
invert(color, weight) 反転色を返します。赤、緑、青の色値が反転し、透明度は変わりません。

例：
invert(white);
結果: black

Sass カラー取得

関数 説明 & 例
red(color) 色から赤の値（0-255）を取得します。

例：
red(#7FBFFF);
結果: 127
red(red);
結果: 255
green(color) 色から緑の値（0-255）を取得します。

例：
green(#7FBFFF);
結果: 255
green(blue);
結果: 0
blue(color) 色から青の値（0-255）を取得します。

例：
blue(#7FBFFF);
結果: 212
blue(blue);
結果: 255
hue(color) HSL 色値における色の角度値 (0deg - 255deg) を返します。

例：
hue(#7FBFFF);
結果: 160deg
saturation(color) 色の彩度の値 (0% - 100%) を取得します。

例：
saturation(#7FBFFF);
結果: 100%
lightness(color) 色の明度の値 (0% - 100%) を取得します。

例：
lightness(#7FBFFF);
結果: 74.9%
alpha(color) Returns the alpha channel of color as a number between 0 and 1.

例：
alpha(#7FBFFF);
結果: 1
opacity(color) 色の透明度の値 (0-1) を取得します。

例：
opacity(rgba(127, 191, 255, 0.5);
結果: 0.5

Sass カラー操作

関数 説明 & 例
mix(color1, color2, weight) 2つの色を混ぜ合わせます。weightパラメータは 0% から 100% でなければなりません。デフォルトの weight は 50% で、新しい色は color1 と color2 の色値をそれぞれ 50% ずつ加算したものであることを示します。weight が 25% の場合、新しい色は color1 の 25% と color2 の 75% の色値を加算したものであることを示します。
adjust-hue(color, degrees) 色の色相値（-360deg ～ 360deg）を変更して、新しい色を作成します。

例：
adjust-hue(#7FBFFF, 80deg);
結果: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) この関数は、指定された色の1つ以上のプロパティ値を調整できます。RGB および HSL カラーの各色値パラメータに加え、alpha チャンネルの値も含まれます。これらのプロパティ値の調整は渡されたキーワードパラメータに依存し、これらのパラメータを指定された色の対応する色値と加減算します。

例：
adjust-color(#7FBFFF, blue: 25);
結果：
change-color(color, red, green, blue, hue, saturation, lightness, alpha) 上記の adjust-color と似ていますが、この関数では渡されたパラメータが元の値を直接置き換え、何の演算も行いません。

例：
change-color(#7FBFFF, red: 255);
結果: #ffffd4
scale-color(color, red, green, blue,  saturation, lightness, alpha) もう1つの実用的な色調整関数です。adjust-color は渡されたパラメータを単純に自身の色値パラメータと加減算するため、累積値がオーバーフローする可能性がありますが、もちろん関数は結果を有効なしきい値内に制御します。一方、scale-color 関数はこのような状況を回避し、オーバーフローを心配することなく、パラメータをしきい値範囲内で効果的に調整できます。

例えば、ある色の明度 lightness が 0% ～ 100% の間にある場合、scale-color($color, $lightness: 40%) を実行すると、その色の明度は (100 - 元の値) × 40% 増加することを示します。

別の例として、scale-color($color, $lightness: -40%) を実行すると、この色の明度は (元の値 - 0) × 40% だけ減少することを示します。

すべての渡すパラメータの値の範囲は 0% ～ 100% の間であり、RGB と HSL のパラメータは競合してはいけません。

scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
rgba(color, alpha) 赤、緑、青と透明度の値から色を作成します。

例：
rgba(#7FBFFF, 30%);
結果: rgba(127, 191, 255, 0.3)
lighten(color, amount) 色の明度値（0% - 100%）を変更して色を明るくし、新しい色を作成します。
darken(color, amount) 色の明度値（0% - 100%）を変更して色を暗くし、新しい色を作成します。
saturate(color, amount) 渡された色の彩度を高めます。adjust-color(color, saturation: amount) と同等です。
desaturate(color, amount) 色の彩度を下げて新しい色値を生成します。同様に、彩度の値の範囲は 0% ～ 100% です。adjust-color(color, saturation: -amount) と同等です。
opacify(color, amount) 色の透明度を下げます。値は 0-1 の間です。adjust-color(color, alpha: amount) と同等です。
fade-in(color, amount) 色の透明度を下げます。値は 0-1 の間です。adjust-color(color, alpha: amount) と同等です。
transparentize(color, amount) 色の透明度を高めます。値は 0-1 の間です。adjust-color(color, alpha: -amount) と同等です。
fade-out(color, amount) 色の透明度を高めます。値は 0-1 の間です。adjust-color(color, alpha: -amount) と同等です。

Sass 関数

その他の拡張