Open In App

Less.js Color Channel blue() 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. Because of this dynamic style sheet language, CSS is more useful. Interoperability between browsers is a characteristic of LESS. The CSS pre-processor is a computer language that is used to augment and compile CSS so that web browsers may use it. In addition, 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.

In this article, we are going to discuss the Less.js Color Channel blue() function is used to extract the blue 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:

blue( value );

 

Parameters:

  • value: This is the parameter that is compulsory for the blue 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 blue() function.

HTML




<!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 Channel blue() 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: blue(rgb(48, 0, 222));
}


Syntax: Now, to compile the above LESS code to CSS code, run the following command.

lessc styles.less styles.css

styles.css: The compiled CSS file is as follows.

styles.css




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


Output:

 

Example 2: The code below demonstrates the usage and implementation of the Color Channel blue() function with the if and boolean logical functions.

HTML




<!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 Channel blue() Function</h3>
    <div class="container">
        <p class="text">Box</p>
    </div>
</body>
  
</html>


styles.less




/* styles.less */
@body-bg-color: #eeeeee;
@text-color: rgb(80, 188, 134);
@container-bg: rgb(255, 178, 24);
@cond1: boolean(blue(@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, bolder, bold);
}


Syntax: To compile the above LESS code to CSS code, run the following command.

lessc styles.less styles.css

styles.css: The compiled CSS file comes to be as follows.

styles.css




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


Output:

 

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



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