Quelles sont les fonctions des canaux de couleur dans Less ?

LESS (Learner CSS) est un préprocesseur développé au-dessus du CSS normal, permettant aux développeurs de maintenir et de personnaliser facilement le code CSS. Par exemple, il permet de créer des variables et des fonctions en code CSS. Par conséquent, les développeurs n’ont pas besoin d’écrire des codes en double comme nous le faisons habituellement en CSS normal.

La fonction de canal de couleur est également une autre fonctionnalité importante de Less, qui prend une valeur de couleur en entrée et renvoie la valeur d'un canal de couleur spécifique.

Dans ce tutoriel, nous découvrirons les 12 fonctions de canal de couleur dans Less à travers des exemples. Ceci est une liste de toutes les fonctions des canaux de couleur.

• Fonction Red()

• Fonction Green()

• Fonction Bleu()

• Fonction Alpha()

• Fonction Hue()

• Fonction Saturation()

• Fonction Luminosité()

• Fonction Hsvhue()

• Fonction Hsvsaturation()

• Fonction Hsvvalue()

• Fonction Luma()

• Fonction Luminance()

Fonction Rouge()

red() est la première fonction de canal de couleur de notre liste. Il prend une valeur de couleur comme argument et renvoie une valeur comprise entre 0 et 255, qui correspond à l'intensité du rouge dans la couleur actuelle.

Exemple

Dans l'exemple ci-dessous, nous stockons la valeur RVB orange comme valeur de la variable "mycolor". Après cela, nous utilisons la fonction red() en passant "myclor" comme paramètre et stockons la valeur de retour dans la variable "redchannle".

Dans la sortie, l'utilisateur peut observer que la valeur de la variable « redchannle » est 255.

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

Sortie

.element {
   background-color: 255;
}

Fonction Green()

green() est deuxième dans notre liste de fonctions de canaux de couleur moins importantes. Il accepte une valeur de couleur et renvoie l'intensité du vert entre 0 et 255.

Exemple

Dans l'exemple ci-dessous, nous stockons la valeur de la couleur RVB dans la variable "mycolor". Nous écrivons toujours l'intensité du vert comme deuxième argument de la méthode rgb().

Nous utilisons la fonction green() pour obtenir la valeur du canal de couleur verte à partir de la valeur RVB, et dans la sortie, nous pouvons voir qu'elle renvoie 15.

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

Sortie

.element {
   color: 15;
}

fonction blue()

La fonction

blue() renvoie la valeur du canal bleu associé à la couleur passée en argument.

Les utilisateurs peuvent suivre l'exemple ci-dessous pour utiliser la fonction blue() en moins.

Exemple

Ici, nous transmettons la valeur de couleur hexadécimale « #FF5733 » comme paramètre de la fonction blue(), qui est la nuance d'orange.

La sortie affiche 51 comme valeur du canal bleu, ce qui signifie que l'intensité du bleu dans cette couleur particulière est de 51.

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

Sortie

.output {
   background-color: 51;
}

Fonction Alpha()

Comme son nom l'indique, la fonction alpha() est utilisée pour obtenir l'opacité de la couleur actuelle, qui représente la valeur du canal alpha.

Dans le format de couleur rgba(), nous passons la valeur alpha comme dernier paramètre.

Exemple

La variable "color" dans l'exemple ci-dessous stocke les valeurs de couleur rgba. Ici, nous transmettons "0,9" comme valeur du canal alpha en rgba.

Nous utilisons la fonction alpha() pour obtenir l'opacité de la "couleur" et elle renvoie 0,9 comme nous pouvons le voir dans le résultat.

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

Sortie

.output {
   opacity: 0.9;
}

Fonction Hue()

La fonction

hue() est utilisée pour obtenir la valeur de teinte d'une couleur spécifique. Il renvoie l'angle de teinte d'une couleur sur la roue chromatique, avec des valeurs comprises entre 0 et 360.

Exemple

Dans l'exemple, nous stockons la valeur RVB dans la variable "color". Après cela, nous avons utilisé la fonction hue() pour obtenir la valeur de teinte de la couleur actuelle.

Nous utilisons les valeurs de teinte lors de la définition des couleurs à l'aide de hsl(). La fonction Hue() renvoie la valeur de couleur rgb(34, 9, 0) 16.

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

Sortie

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

Fonction Saturation()

La fonction

saturation() renvoie la valeur de saturation de la couleur passée en argument, allant de 0 à 100%.

Exemple

Dans cet exemple, nous prenons une couleur RVB (34, 9, 76) pour obtenir sa valeur de saturation. Ici, nous exécutons la fonction saturation() dans la méthode hsl() pour obtenir la valeur de saturation de la couleur actuelle.

Dans la sortie, nous pouvons observer qu'il renvoie 78,8 % comme valeur saturée

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

Sortie

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

Fonction Luminosité()

La fonction

brightness() est utilisée pour obtenir la luminosité d'une fonction spécifique. Il renvoie une valeur comprise entre 0 % et 100 %.

Exemple

Ici, nous obtenons la valeur de luminosité de la couleur RVB (34, 9, 76) et l'utilisons lors de la définition d'autres couleurs à l'aide de la méthode hsl(). Dans le résultat, l'utilisateur peut observer que la méthode Brightness() renvoie une valeur de 16,7 %.

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

Sortie

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

Fonction Hsvhue()

La fonction

hsvhue() est utilisée pour obtenir la valeur de teinte dans le modèle de couleur hsv.

Exemple

Dans cet exemple, nous obtenons la valeur de teinte dans le modèle hsv en utilisant la fonction hsvhue(), qui renvoie une valeur comprise entre 0 et 360. Dans la sortie, nous pouvons observer qu’il renvoie une valeur de couleur de 16.

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

Sortie

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

Fonction Hsvsaturation()

La fonction

hssaturation() est utilisée pour obtenir la valeur de saturation dans le modèle de couleur hsv.

Exemple

Dans cet exemple, nous utilisons la fonction hsvsaturation() en passant la valeur de couleur en paramètre. En sortie, on peut voir qu'il renvoie 100% de saturation.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!