Less.js Color Channel red() 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. CSS is more functional because of this dynamic style sheet language. Cross-browser interoperability is a feature of LESS. A computer language known as the CSS pre-processor is used to enhance and compile CSS so that web browsers may use it. Aside from that, it is a CSS language extension that provides features like variables, functions, mixins, and operations that let us create dynamic CSS while preserving backward compatibility.

Less.js Color Channel red() Function is used to extract the red channel of the color object. It returns a positive decimal value. It takes values in hex codes, RGB values, HSL values, and HSV values.

Syntax:

red(value);

Parameters:

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

Compile LESS code into CSS code using the link.

Example 1: The code below demonstrates the usage and implementation of the Color Channel red() 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 red() Function</b></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: red(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:

styles.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 red() 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 red() Function</b></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(red(@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, bolder);   
}

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.css

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