Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is better since CSS makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. To create and improve CSS, so that web browsers can use it, a computer language known as the CSS pre-processor is used. In addition, it is a CSS language extension that provides tools like variables, functions, mixins, and operations to help with the development of dynamic CSS while preserving backward compatibility.
In this article, we are going to discuss the color definition hsv() function, which is used to create the color from values for hue, saturation, and value. Its specifications are as follows:
- hue: a number that ranges from 0 to 360
- saturation: It comprises a value between 0 and 1 or a percentage between 0 and 100%.
- value: It consists of a 0 to 1 or a 0 to 100% figure or percentage.
This function basically takes a hue, saturation, and value and returns it in hex representation.
Â
Syntax:
hsv(hue, saturation, value)
Parameter values:
- hue: This is the first parameter and it is usually a number that ranges from 0 to 360
- saturation: This is the second parameter and it is usually a value between 0 and 1 or a percentage between 0 and 100%.
- value: This is the third parameter and it is usually a 0 to 1 or a 0 to 100% figure or percentage.
Return Type: It returns the different colors with their values.
Please refer to the How to pre-compile LESS into CSS article for a detailed description.
Example 1: The code below demonstrates the usage and implementation of the Color Definition hsv() function.
HTML
<!DOCTYPE html> <html> Â Â <head> Â Â Â Â <link rel="stylesheet"Â Â Â Â Â Â Â Â Â Â Â type="text/css"Â Â Â Â Â Â Â Â Â Â Â href="style.css"/> </head> Â Â <body> Â Â Â Â <h1 style="color:green">neveropen</h1>Â Â Â Â Â Â <h3>Less.js Color Definition hsv() Function</h3> Â Â Â Â <div class="c1">Â Â Â Â Â Â Â Â Â Â <p>hsv(90, 100%, 50%)<br> Â Â Â Â Â Â Â Â Â Â Â (Hex Value)<br>#ff0099c8</p>Â Â Â Â Â Â </div> </body> Â Â </html> |
style.less: This is compiled into a CSS file which is given further below:
style.less
@body-bg-color: #eeeeee; @color: hsl(194, 100%, 39%); Â Â .c1 { Â Â Â Â width: 250px; Â Â Â Â height: 150px; Â Â Â Â margin: 1rem; Â Â Â Â // background-color: @color;Â Â Â Â Â Â background-color: hsv(90, 100%, 50%); } Â Â p { Â Â Â Â padding: 50px 0px 0px 60px; } |
To compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
style.css: The CSS output of the above Less file was compiled.
style.css
.c1 { Â Â Â Â width: 250px; Â Â Â Â height: 150px; Â Â Â Â margin: 1rem; Â Â Â Â background-color: #408000; } Â Â p { Â Â Â Â padding: 50px 0px 0px 60px; } |
Output:
Â
Example 2: The code below demonstrates the usage and implementation of the Color Definition hsv() function with the if and boolean logical functions and the color type function.
HTML
<!DOCTYPE html> <html> Â Â <head> Â Â Â Â <link rel="stylesheet"Â Â Â Â Â Â Â Â Â Â Â type="text/css"Â Â Â Â Â Â Â Â Â Â Â href="style.css"/> </head> Â Â <body> Â Â Â Â <h1 style="color:green">neveropen</h1>Â Â Â Â Â Â <h3>Less.js Color Definition hsv() Function</h3> Â Â Â Â <div class="c1">Â Â Â Â Â Â Â Â Â Â <p>hsv(90, 100%, 50%)<br> Â Â Â Â Â Â Â Â Â Â Â (Hex Value)<br>#408000</p>Â Â Â Â Â Â </div> </body> Â Â </html> |
style.less: This is compiled into a CSS file which is given further below:
style.less
@body-bg-color: #eeeeee; @color: hsl(150, 100%, 39%); @second: rgb(251, 255, 0); @hex: hsv(90, 100%, 50%); @cond1: boolean(iscolor(@hex)); Â Â .c1 { Â Â Â Â width: 250px; Â Â Â Â height: 150px; Â Â Â Â margin: 1rem; Â Â Â Â background-color: if(@cond1, @second, @color); } Â Â p { Â Â Â Â padding: 50px 0px 0px 60px; Â Â Â Â color: @hex; } |
To compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
style.css: The CSS output of the above Less file was compiled:
style.css
.c1 { Â Â Â Â width: 250px; Â Â Â Â height: 150px; Â Â Â Â margin: 1rem; Â Â Â Â background-color: #fbff00; } Â Â p { Â Â Â Â padding: 50px 0px 0px 60px; Â Â Â Â color: #408000; } |
Output:
Â
Reference: https://lesscss.org/functions/#color-definition-hsvÂ
