Less.js Color Channel hsvvalue() Function
Last Updated :
26 Sep, 2022
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. With the help of this dynamic style sheet language, CSS is more functional. LESS offers cross-browser compatibility. CSS is improved and compiled using a computer language called the CSS pre-processor so that web browsers may use it. Additionally, it is an extension to the CSS language that offers features like variables, functions, mixins, and operations that enable us to develop dynamic CSS while maintaining backward compatibility.
Less.js Color Channel hsvvalue() function is used to extract the value channel of the color object in the HSV color space. It returns a percentage value. It takes values in hex codes, RGB values, HSL values, and HSV values.
Syntax:
hsvvalue(value);
Parameters:
- value: This is the parameter that is compulsory for the HSV value function. It takes values in hex codes, RGB values, HSL values, and HSV values.
Compile LESS code into CSS code.
Example 1: The code below demonstrates the usage and implementation of the Color Channel hsvvalue() function.
index.html
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" type = "text/css"
href = "style.css" />
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >< b >Less.js Color Channel
hsvvalue() Function</ b ></ h3 >
< div class = "container" >
</ div >
</ body >
</ html >
|
styles.less
@body-bg- color : #eeeeee ;
@text- color : rgb ( 0 , 200 , 100 );
@container-bg: rgb ( 220 , 43 , 55 );
body {
background : @body-bg-color;
}
.container{
height : 100px ;
width :hsvvalue( rgb ( 77 , 168 , 54 ));
padding : 30px 0px 0px 25px ;
background-color : ( #1ed4b9 );
color :yellow;
}
|
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
style.css
body {
background : #eeeeee ;
}
.container {
height : 100px ;
width : 65.88235294% ;
padding : 30px 0px 0px 25px ;
background-color : #1ed4b9 ;
color : yellow;
}
|
Output:
Example 2: The code below demonstrates the usage and implementation of the Color Channel hsvvalue() function with the if and boolean logical functions.
index.html
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" type = "text/css"
href = "style.css" />
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 >< b >Less.js Color Channel
hsvvalue() Function</ b ></ h3 >
< div class = "container" >
</ div >
</ body >
</ html >
|
styles.less
@body-bg- color : #eeeeee ;
@text- color : rgb ( 80 , 188 , 134 );
@container-bg: rgb ( 255 , 178 , 24 );
@cond 1: boolean(hsvvalue(@text-color) > 50% );
body
{
background : @body-bg-color;
}
.container
{
height : 100px ;
width : hsvvalue( rgb ( 93 , 137 , 81 ));
padding : 30px 0px 0px 25px ;
background-color : if(@cond 1 , @container-bg, @text-color);
color :yellow;
}
|
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
style.css
body {
background : #eeeeee ;
}
.container {
height : 100px ;
width : 53.7254902% ;
padding : 30px 0px 0px 25px ;
background-color : #ffb218 ;
color : yellow;
}
|
Output:
Reference: https://lesscss.org/functions/#color-channel-hsvvalue
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...