Less のカラー チャネル機能とは何ですか?

LESS (Learner CSS) は、通常の CSS 上に開発されたプリプロセッサであり、開発者が CSS コードを簡単に保守およびカスタマイズできるようにします。たとえば、CSS コードで変数や関数を作成できます。したがって、開発者は、通常の CSS のように重複したコードを記述する必要はありません。

カラー チャネル関数も Less のもう 1 つの重要な関数であり、カラー値を入力として受け取り、特定のカラー チャネルの値を返します。

このチュートリアルでは、例を通して Less の 12 個のカラー チャネル関数について学びます。これはすべてのカラー チャネル関数のリストです。

• Red() 関数

• Green() 関数

• Blue() 関数

• Alpha() 関数

• Hue()関数

• Saturation() 関数

• 明るさ()関数

• Hsvhue() 関数

• Hsvsaturation() 関数

• Hsvvalue() 関数

• Luma() 関数

• Luminance() 関数

Red()関数

red() は、リストの最初のカラー チャネル関数です。引数として色の値を受け取り、現在の色の赤の強度である 0 ～ 255 の値を返します。

＃＃＃例＃＃＃

以下の例では、オレンジ色の rgb 値を「mycolor」変数の値として保存します。その後、「myclor」をパラメータとして渡して red() 関数を使用し、戻り値を「redchannle」変数に格納します。

出力では、「redchannle」変数の値が 255 であることがわかります。

リーリー ＃＃＃出力＃＃＃ リーリー

Green()関数

green() は、カラー チャネルの少ない関数のリストの 2 番目です。色の値を受け入れ、0 ～ 255 の緑の強度を返します。

＃＃＃例＃＃＃

以下の例では、RGB カラー値を「mycolor」変数に保存します。常に緑の強度を rgb() メソッドの 2 番目の引数として書き込みます。

green() 関数を使用して、RGB 値から緑色チャネル値を取得します。出力では、15 が返されることがわかります。

リーリー ＃＃＃出力＃＃＃ リーリー

Blue() 関数

blue() 関数は、引数として渡された色に関連付けられた青チャネルの値を返します。

ユーザーは、以下の例に従って、less で blue() 関数を使用できます。

＃＃＃例＃＃＃

ここでは、オレンジの色合いである「#FF5733」16 進数の色の値を blue() 関数のパラメーターとして渡します。

出力には、青チャネルの値として 51 が表示されます。これは、その特定の色の青の強度が 51 であることを意味します。

リーリー ＃＃＃出力＃＃＃ リーリー

Alpha() 関数

名前が示すように、alpha() 関数は、アルファ チャネル値を表す現在のカラーの不透明度を取得するために使用されます。

rgba() カラー形式では、アルファ値を最後のパラメータとして渡します。

＃＃＃例＃＃＃

次の例の「color」変数は、rgba カラー値を格納します。ここでは、rgba のアルファ チャネル値として「0.9」を渡しています。

alpha() 関数を使用して「色」の不透明度を取得すると、0.9 が返され、出力で確認できます。

リーリー ＃＃＃出力＃＃＃ リーリー

Hue()関数

hue() 関数は、特定の色の色相値を取得するために使用されます。カラー ホイール上の色の色相角を 0 ～ 360 の値で返します。

＃＃＃例＃＃＃

この例では、RGB 値を「color」変数に保存します。その後、hue() 関数を使用して現在の色の色相値を取得しました。

hsl() を使用して色を定義するときは、色相値を使用します。 Hue() 関数は、rgb(34, 9, 0) カラー値 16 を返します。

リーリー ＃＃＃出力＃＃＃ リーリー

Saturation() 関数

saturation() 関数は、引数として渡された色の彩度の値を 0 ～ 100% の範囲で返します。

＃＃＃例＃＃＃

この例では、rgb(34, 9, 76) カラーを使用してその彩度の値を取得します。ここでは、hsl() メソッドで saturation() 関数を実行して、現在の色の彩度値を取得します。

出力では、飽和値として 78.8% が返されることがわかります。 リーリー ＃＃＃出力＃＃＃ リーリー

明るさ()関数

brightness() 関数は、特定の関数の明るさを取得するために使用されます。 0% から 100% までの値を返します。

＃＃＃例＃＃＃

ここでは、rgb(34, 9, 76) 色の明るさの値を取得し、hsl() メソッドを使用して他の色を定義するときにそれを使用します。出力では、Brightness() メソッドが 16.7% の値を返すことがわかります。

リーリー ＃＃＃出力＃＃＃ リーリー

Hsvhue()関数

hsvhue() 関数は、hsv カラー モデルの色相値を取得するために使用されます。

＃＃＃例＃＃＃

この例では、hsvhue() 関数を使用して hsv モデルの色相値を取得します。この関数は 0 ～ 360 の値を返します。出力では、カラー値 16 が返されることがわかります。

リーリー ＃＃＃出力＃＃＃ リーリー

Hsvsaturation() 関数

hssaturation() 関数は、hsv カラー モデルの彩度値を取得するために使用されます。

＃＃＃例＃＃＃

この例では、パラメータとして色の値を渡して hsvsaturation() 関数を使用します。出力では、100% の彩度が返されていることがわかります。

@hsvsaturationValue: hsvsaturation(rgb(255, 87, 51);
.demo {
   background-color: hsv(65, @hsvsaturationValue,80%);
}

输出

.demo {
   background-color: hsv(65, 100%, 80%);
}

Hsvvalue() 函数

hsvalue()函数用于获取hsv颜色模型中的亮度值。

示例

这里，我们使用 hsvvalue() 函数来获取 hsv 模型中颜色的亮度。它返回 100%，我们可以在输出中看到。

@hsvvalue: hsvvalue(rgb(255, 87, 51);
.demo {
   background-color: hsv(65, 90%, @hsvvalue);
}

输出

.demo {
   background-color: hsv(65, 90%, 100%);
}

Luma() 函数

luma() 函数用于通过伽马校正获取特定值的亮度值。它返回 1 到 100 之间的值。

示例

在下面的示例中，我们使用 luma() 函数获取经过伽玛校正的 rgb(50, 250, 150) 颜色的亮度值。在输出中，我们可以看到它返回了 71.251% 的值。

.demo {
   background: luma(rgb(50, 250, 150));
}

输出

.demo {
   Background: 71.251%
}

亮度()函数

luminance() 函数还用于获取特定值的亮度值，但不进行伽玛校正。

示例

在这个例子中，我们使用luminance()函数来获取没有伽马校正的rgb(50,250,150)颜色的亮度值。用户可以观察相同颜色值的luma()和luminance()函数的输出值之间的差异。

.demo {
   background: luminance(rgb(50, 250, 150));
}

输出

.demo {
  Background: 78.533 %
}

以上がLess のカラー チャネル機能とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。