Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS uses a dynamic style sheet language, it is superior. LESS is adaptable enough to function in a variety of browsers. A computer language called the CSS pre-processor is used to develop and enhance CSS so that web browsers may use it. Additionally, it is an extension to the CSS language that offers tools like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while maintaining backward compatibility.
In this article, we will see the Color Definition hsva() function, which is used to create the transparent color from values for hue, saturation, value, and alpha. 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.
- alpha: It consists of a 0 to 1 or a 0 to 100% figure or percentage.
This function basically takes hue, saturation, value, and alpha values and returns them in RGB representation.
Syntax:
hsva(hue, saturation, value, alpha)
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.
- alpha: This is the fourth 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 below code example demonstrates the usage and implementation of the Color Definition hsva() function in Less.js.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Less.js Color Definition hsva() Function</h3>
<div class="c1">
<p>hsva(90, 100%, 50%, 68%)<br>
(RGBA Value)<br>rgba(64, 128, 0, 0.68)</p>
</div>
</body>
</html>
|
style.less: This is compiled into a CSS file which is given below.
@body-bg-color: #eeeeee;
body { background-color: @body-bg-color;
} .c1 {
width: 250px;
height: 150px;
margin: 1rem;
background-color: hsva(90, 100%, 50%, 68%);
} p { padding: 50px 0px 0px 45px;
} |
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:
body { background-color: #eeeeee;
} .c1 {
width: 250px;
height: 150px;
margin: 1rem;
background-color: rgba(64, 128, 0, 0.68);
} p { padding: 50px 0px 0px 45px;
} |
Output:
Example 2: The below code example demonstrates the usage and implementation of the Color Definition hsva() function with the if and boolean logical functions and the is color type function.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Less.js Color Definition hsva() Function</h3>
<div class="c1">
<p>
hsva(90, 100%, 50%, 0.5)<br>
(RGBA Value)<br>rgba(64, 128, 0, 0.5)
</p>
</div>
</body>
</html>
|
style.less: This is compiled into a CSS file which is given below.
@body-bg-color: #eeeeee;
@color: hsl(150, 100%, 39%);
@second: rgb(251, 255, 0);
@hex: hsva(90, 100%, 50%, 0.5);
@cond1: boolean(iscolor(@hex));
.c1 {
width: 250px;
height: 150px;
margin: 1rem;
background-color: if(@cond1, @second, @color);
} p { padding: 50px 0px 0px 40px;
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:
.c1 {
width: 250px;
height: 150px;
margin: 1rem;
background-color: #fbff00;
} p { padding: 50px 0px 0px 40px;
color: rgba(64, 128, 0, 0.5);
} |
Output:
Reference: https://lesscss.org/functions/#color-definition-hsva