Sass カラー関数
Sass カラー関数
Sass のカラー関数を、カラー関数の設定、カラー関数の取得、カラー関数の操作の 3 つの部分に分割しました。
Sass セットのカラー関数
| 関数 | 説明と例 |
|---|---|
| rgb(赤、緑、青） | 赤-緑-青 (RGB) モデルを使用して色を設定します。 RGB カラー値は
rgb(赤、緑、青)で指定します。各パラメータは強度を定義します
0 ～ 255 の整数、またはパーセンテージ値を指定できます。
(0% から 100%)。 例： rgb(0, 0, 255); // 青としてレンダリングされるのは、 青のパラメータは最高値 (255) に設定され、その他のパラメータは 0 に設定されます。 |
| rgba(赤、緑、青、アルファ） | 赤-緑-青-アルファ (RGBA) モデルを使用して色を設定します。 RGBAカラー
値は、RGB カラー値をアルファ チャネルで拡張したものです。
色の不透明度を指定します。 alpha パラメータは次の範囲の数値です。
0.0 (完全に透明) および 1.0 (完全に不透明)。 例： rgba(0, 0, 255, 0.3); // 青としてレンダリングされます 不透明度 |
| hsl(色合い、飽和、軽さ) | 色相-彩度-明度 (HSL) モデルを使用して色を設定します - そして
色の円筒座標表現を表します。色合いは、
カラーホイールの度数 (0 ～ 360) - 0 または 360 は赤、120 は緑、
240は青です。彩度はパーセント値です。 0% はグレーの色合いを意味し、
100% はフルカラーです。軽さもパーセンテージです。 0% は黒、100% は黒です
白。 例： hsl(120, 100%, 50%); // 緑 hsl(120, 100%, 75%); // 薄緑色 hsl(120, 100%, 25%); // 濃い緑色 hsl(120, 60%, 70%); // パステルグリーン |
| hsla(色合い、飽和、軽さ、アルファ） | 色相-彩度-明度-アルファ (HSLA) モデルを使用して色を設定します。 HSLA
カラー値は、アルファ チャネルを備えた HSL カラー値の拡張です。
色の不透明度を指定します。 alpha パラメータは数値です
0.0 (完全に透明) と 1.0 (完全に不透明) の間。 例： hsl(120, 100%, 50%, 0.3); // 不透明度のある緑色 hsl(120, 100%, 75%, 0.3); // 不透明度のある薄緑色 |
| グレースケール(色) | と同じ明度のグレー色を設定します。色。 例： グレースケール(#7fffd4); 結果: #c6c6c6 |
| 補体（色) | の補色となる色を設定します。色。 例： 補数(#7fffd4); 結果: #ff7faa |
| 反転（色、重さ） | の反転色または負の色を設定します。色。
の重さパラメータはオプションであり、0% の間の数値である必要があります
そして100％。デフォルトは 100% です。 例： 反転(白); 結果: 黒 |
Sass Get Color 関数
| 関数 | 説明と例 |
|---|---|
| 赤（色) | の赤色の値を返します。色0 ～ 255 の数値として指定します。 例： 赤(#7fffd4); 結果: 127 赤(レッド); 結果： 255 |
| 緑（色） | の緑色の値を返します。色0 ～ 255 の数値として指定します。 例： 緑(#7fffd4); 結果: 255 緑(青); 結果： 0 |
| 青（色） | の青色の値を返します。色0 ～ 255 の数値として指定します。 例： 青(#7fffd4); 結果: 212 青(青); 結果: 255 |
| 色相(色） | の色相を返します色0 度から 360 度までの数値として指定します。 例： 色相(#7fffd4); 結果: 160度 |
| 飽和（色) | HSL 彩度を返します。色0% から 0% までの数値として
100%。 例： 彩度(#7fffd4); 結果: 100% |
| 軽さ(色） | HSL の明度を返します。色0% から 0% までの数値として
100%。 例： 明度(#7fffd4); 結果: 74.9% |
| アルファ（色） | のアルファ チャネルを返します。色0 から 1 までの数値として。 例： アルファ(#7fffd4); 結果: 1 |
| 不透明度(色） | のアルファ チャネルを返します。色0 から 1 までの数値として。 例： 不透明度(rgba(127, 255, 212, 0.5)); 結果： 0.5 |
Sass のカラー関数の操作
| 関数 | 説明と例 |
|---|---|
| ミックス（色1、色2、重さ） | を混ぜ合わせた色を作成します色1と色2。 の重さパラメータは 0% から 100% の間である必要があります。より大きな重量 color1 をより多く使用する必要があることを意味します。重量が小さいほど、重量が大きくなります color2 を使用する必要があります。デフォルトは 50% です。 |
| 色相調整(色、度) | を調整します色-360度から360度までの色相。 例： 色相調整(#7fffd4, 80度); 結果: #8080ff |
| 色調整(色、赤、緑、青、色合い、飽和、軽さ、アルファ) | 1 つまたは複数のパラメータを指定された量だけ調整します。この機能
指定された量を既存のカラー値に加算または減算します。 例： 色を調整(#7fffd4, 青: 25); 結果： |
| 色を変える（色、赤、緑、青、色合い、飽和、軽さ、アルファ） | の 1 つ以上のパラメータを設定します。色新しい価値観へ。 例： 色変更(#7fffd4, 赤: 255); 結果： #ffffd4 |
| スケールの色(色、赤、緑、青、飽和、軽さ、アルファ） | 1 つ以上のパラメータをスケールします。色。 |
| rgba(色、アルファ） | 新しい色を作成します色与えられたものと一緒にアルファチャネル。 例： rgba(#7fffd4, 30%); 結果： rgba(127, 255, 212, 0.3) |
| 軽くする(色、額) | より明るい色を作成します色と額0% から 100% の間。 amount パラメータは、HSL の明度を次のように増加させます。 そのパーセント。 |
| 暗い（色、額） | より暗い色を作成します色と額間 0% と 100%。 amount パラメータは、HSL の明度をその分だけ減少させます。 パーセント。 |
| 飽和(色、額) | より彩度の高い色を作成します色と額0% から 100% の間。 amount パラメータは、HSL の彩度を次のように増加させます。 そのパーセント。 |
| 彩度を下げる(色、額) | 彩度の低い色を作成します色と額0% から 100% の間。 amount パラメータは、HSL の彩度を次のように減少させます。 そのパーセント。 |
| 不透明化(色、額） | より不透明な色を作成します色と額0 と 1 の間。量パラメータはアルファ チャネルをその分だけ増加させます。 額。 |
| フェードイン（色、額） | より不透明な色を作成します色と額0 と 1 の間。量パラメータはアルファ チャネルをその分だけ増加させます。 額。 |
| 透明化(色、額） | より透明感のあるカラーを実現します。色と額0 と 1 の間。量パラメータはアルファ チャネルをその分だけ減少させます。 額。 |
| フェードアウト（色、額） | より透明感のあるカラーを実現します。色と額0 と 1 の間。量パラメータはアルファ チャネルをその分だけ減少させます。 額。 |