Open In App

Less.js Color Channel hue() Function

Improve
Improve
Like Article
Like
Save
Share
Report

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that makes CSS more powerful. LESS provides cross-browser compatibility. A programming language called CSS pre-processor is used to enhance CSS and compile it for use by web browsers. In addition, it is a language extension for CSS that provides capabilities like variables, functions, mixins, and operations that let us create dynamic CSS while yet preserving backward compatibility.

Less.js Color Channel hue() function is used to extract the hue value of the color object in the HSL color space. It returns a percentage value.  It takes values in hex codes, RGB values, and HSL values.

Syntax:

hue(condition);

 

Parameters:

  • value: This is the parameter that is compulsory for the hue function. It takes values in hex codes, RGB values, and HSL values.

Example 1: The code below demonstrates the usage and implementation of the Color Channel hue() function.

index.html




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" 
          href="style.css"/>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Less.js Color Channel hue() Function</h3>
    <div class="container">
        <p class="text">Box</p>
    </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: 100px;  
    padding: 30px 0px 0px 25px;  
    background-color: (#cc3eff);  
    color:yellow;  
}
.text{
    font-weight: hue(rgb(48, 0, 222));  
}


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: 100px;
    padding: 30px 0px 0px 25px;
    background-color: #cc3eff;
    color: yellow;
}
.text {
    font-weight: 252.97297297;
}


Output:

 

Example 2: The code below demonstrates the usage and implementation of the Color Channel hue() 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>GeeksforGeeks</h1>
    <h3>Less.js Color Channel hue() Function</h3>
    <div class="container">
        <p class="text">Box</p>
    </div>
</body>
  
</html>


styles.less




@body-bg-color: #eeeeee;
@text-color: rgb(80, 188, 134);
@container-bg: rgb(255, 178, 24);
@cond1: boolean(hue(@text-color) > 50%);
  
body {
   background: @body-bg-color;
}
  
.container{
   height:100px;    
   width: 150px;  
   padding: 30px 0px 0px 25px;  
   background-color: #6a001e;  
   color:yellow;  
}
.text{
    font-weight: if(@cond1, bold, semi-bold);  
}


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: 

styles.less:

styles.css




body {
    background: #eeeeee;
}
.container {
    height: 100px;
    width: 150px;
    padding: 30px 0px 0px 25px;
    background-color: #6a001e;
    color: yellow;
}
.text {
    font-weight: bold;
}


Output:

 

Reference: https://lesscss.org/functions/#color-channel-hue 



Last Updated : 27 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads