Welche Farbkanalfunktionen gibt es in Less?

LESS (Learner CSS) ist ein Präprozessor, der auf normalem CSS basiert und es Entwicklern ermöglicht, CSS-Code einfach zu verwalten und anzupassen. Es ermöglicht beispielsweise die Erstellung von Variablen und Funktionen im CSS-Code. Daher müssen Entwickler keine doppelten Codes schreiben, wie wir es normalerweise in normalem CSS tun.

Die Farbkanalfunktion ist auch eine weitere wichtige Funktion von Less, die einen Farbwert als Eingabe verwendet und den Wert eines bestimmten Farbkanals zurückgibt.

In diesem Tutorial lernen wir anhand von Beispielen die 12 Farbkanalfunktionen in Less kennen. Dies ist eine Liste aller Farbkanalfunktionen.

• Red()-Funktion

• Green()-Funktion

• Blue()-Funktion

• Alpha()-Funktion

• Hue()-Funktion

• Saturation()-Funktion

• Brightness()-Funktion

• Hsvhue()-Funktion

• Hsvsaturation()-Funktion

• Hsvvalue()-Funktion

• Luma()-Funktion

• Luminance()-Funktion

Red()-Funktion

red() ist die erste Farbkanalfunktion in unserer Liste. Es nimmt einen Farbwert als Argument und gibt einen Wert zwischen 0 und 255 zurück, was der Intensität von Rot in der aktuellen Farbe entspricht.

Beispiel

Im folgenden Beispiel speichern wir den orangefarbenen RGB-Wert als Wert der Variablen „mycolor“. Danach verwenden wir die Funktion red(), indem wir „myclor“ als Parameter übergeben und den Rückgabewert in der Variablen „redchannle“ speichern.

In der Ausgabe kann der Benutzer sehen, dass der Wert der Variable „redchannle“ 255 ist.

@mycolor: rgb(255, 165, 0);
@redchannel: red(@mycolor);
.element {
   background-color: @redchannel;
}

Ausgabe

.element {
   background-color: 255;
}

Green()-Funktion

green() steht an zweiter Stelle in unserer Liste weniger Farbkanalfunktionen. Es akzeptiert einen Farbwert und gibt die Grünintensität zwischen 0 und 255 zurück.

Beispiel

Im folgenden Beispiel speichern wir den RGB-Farbwert in der Variablen „mycolor“. Wir schreiben die Intensität von Grün immer als zweites Argument der rgb()-Methode.

Wir verwenden die Funktion green(), um den Wert des grünen Farbkanals aus dem RGB-Wert zu ermitteln, und in der Ausgabe können wir sehen, dass sie 15 zurückgibt.

@mycolor: rgb(0, 15, 0);
@greenchannel: green(@mycolor);
.element {
   color: @greenchannel;
}

Ausgabe

.element {
   color: 15;
}

blue()-Funktion

Die Funktion

blue() gibt den Wert des blauen Kanals zurück, der der als Argument übergebenen Farbe zugeordnet ist.

Benutzer können dem folgenden Beispiel folgen, um die Funktion blue() in weniger zu verwenden.

Beispiel

Hier übergeben wir den hexadezimalen Farbwert „#FF5733“ als Parameter der Funktion blue(), der den Orangeton darstellt.

Die Ausgabe zeigt 51 als Wert des blauen Kanals, was bedeutet, dass die Intensität von Blau in dieser bestimmten Farbe 51 beträgt.

@bluechannel: blue(#FF5733);
.output {
   color: @bluechannel;
}

Ausgabe

.output {
   background-color: 51;
}

Alpha()-Funktion

Wie der Name schon sagt, wird die Funktion alpha() verwendet, um die Deckkraft der aktuellen Farbe zu ermitteln, die den Alpha-Kanalwert darstellt.

Im Farbformat rgba() übergeben wir den Alphawert als letztes Argument.

Beispiel

Die Variable „color“ im Beispiel unten speichert RGBA-Farbwerte. Hier übergeben wir „0,9“ als Alphakanalwert in RGBA.

Wir verwenden die Funktion alpha(), um die Deckkraft der „Farbe“ zu ermitteln, und sie gibt 0,9 zurück, wie wir in der Ausgabe sehen können.

@color: rgba(25, 77, 91, 0.9);
@alphachannel: alpha(@color);
.output {
   opacity: @alphachannel;
}

Ausgabe

.output {
   opacity: 0.9;
}

Hue()-Funktion

Die Funktion

hue() wird verwendet, um den Farbtonwert einer bestimmten Farbe zu ermitteln. Es gibt den Farbtonwinkel einer Farbe im Farbkreis mit Werten zwischen 0 und 360 zurück.

Beispiel

Im Beispiel speichern wir den RGB-Wert in der Variablen „color“. Danach haben wir die Funktion hue() verwendet, um den Farbtonwert der aktuellen Farbe zu ermitteln.

Wir verwenden Farbtonwerte, wenn wir Farben mit hsl() definieren. Die Funktion Hue() gibt den RGB(34, 9, 0)-Farbwert 16 zurück.

@color: rgb(34, 9, 0);
@huevalue: hue(@color);
.element {
   color: hsl(@huevalue, 100%, 50%);
}

Ausgabe

.element {
   color: hsl(16, 100%, 50%);
}

Saturation()-Funktion

Die Funktion

saturation() gibt den Sättigungswert der als Argument übergebenen Farbe im Bereich von 0 bis 100 % zurück.

Beispiel

In diesem Beispiel nehmen wir eine RGB-Farbe (34, 9, 76), um ihren Sättigungswert zu erhalten. Hier führen wir die Funktion saturation() in der Methode hsl() aus, um den Sättigungswert der aktuellen Farbe zu erhalten.

In der Ausgabe können wir beobachten, dass 78,8 % als gesättigter Wert zurückgegeben werden

@color: rgb(34, 9, 76);
.element {
   color: hsl(21, saturation(@color), 50%);
}

Ausgabe

.element {
   color: hsl(21, 78.8%, 50%);
}

Brightness()-Funktion

Die Funktion

brightness() wird verwendet, um die Helligkeit einer bestimmten Funktion zu ermitteln. Es wird ein Wert zwischen 0 % und 100 % zurückgegeben.

Beispiel

Hier erhalten wir den Helligkeitswert der RGB-Farbe (34, 9, 76) und verwenden ihn, wenn wir andere Farben mit der hsl()-Methode definieren. In der Ausgabe kann der Benutzer beobachten, dass die Brightness()-Methode einen Wert von 16,7 % zurückgibt.

@color: rgb(34, 9, 76);
.element {
   color: hsl(21, 78.8%, brightness(@color));
}

Ausgabe

.element {
   color: hsl(21, 78.8%, 16.7%);
}

Hsvhue()-Funktion

Die Funktion

hsvhue() wird verwendet, um den Farbtonwert im HSV-Farbmodell zu erhalten.

Beispiel

In diesem Beispiel erhalten wir den Farbtonwert im HSV-Modell mithilfe der Funktion hsvhue(), die einen Wert zwischen 0 und 360 zurückgibt. In der Ausgabe können wir beobachten, dass der Farbwert 16 zurückgegeben wird.

@ hsvhueValue: hsvhue(rgb(255, 87, 51);
.demo {
   background-color: hsv(@hsvhueValue, 70%,60%);
}

Ausgabe

.demo {
   background-color: hsv(16, 70%, 60%);
}

Hsvsaturation()-Funktion

Die Funktion

hssaturation() wird verwendet, um den Sättigungswert im HSV-Farbmodell zu erhalten.

Beispiel

In diesem Beispiel verwenden wir die Funktion hsvsaturation(), indem wir den Farbwert als Parameter übergeben. In der Ausgabe können wir sehen, dass eine Sättigung von 100 % zurückgegeben wird.

@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 %
}

Das obige ist der detaillierte Inhalt vonWelche Farbkanalfunktionen gibt es in Less?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!