Less.js Color Channel luma() Function

Last Updated : 06 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. This dynamic style sheet language makes CSS more beneficial. One feature of LESS is interoperability between browsers. In order for web browsers to use CSS, it is enhanced and compiled using a computer language called the CSS pre-processor. The fact that it is an extension of the CSS language with features like variables, functions, mixins, and operations allows us to create dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss the Color Channel luma() function used to extract the luma channel(unrelenting brightness) of the color object. It returns a percentage value(0-100%). It takes values in hex codes, RGB values, HSL values, and HSV values.

Syntax:

luma(value);

Parameters:

value: This is the parameter that is compulsory for the luma 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 luma() 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 luma() Function</h3> 
    <div class="container"> 
        <p class="text"> 
            Width of this div:<br>luma(base Color) 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: rgb(255, 255, 0); 
@container-bg: rgb(0, 200, 100); 
@luma: luma(@container-bg); 
  
body { 
    background: @body-bg-color; 
} 
  
.container { 
    height: 100px; 
    width: @luma; 
    padding: 30px 0px 0px 95px; 
    background-color: (#cc3eff); 
    color: yellow; 
} 
  
.text { 
    color: @text-color; 
}

Syntax: 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: 42.22865315%; 
    padding: 30px 0px 0px 95px; 
    background-color: #cc3eff; 
    color: yellow; 
} 
  
.text { 
    color: #ffff00; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Color Channel luma() 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 luma() Function</h3> 
    <div class="container"> 
        <p class="text"> 
            Width of this div:<br>luma(base Color) * 30 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: rgb(255, 255, 0); 
@container-bg: rgb(19, 5, 91); 
@luma: luma(@container-bg); 
@cond: boolean(@luma > 50%); 
  
body { 
    background: @body-bg-color; 
} 
  
.container { 
    height: 100px; 
    width: @luma * 30; 
    padding: 30px 0px 0px 95px; 
    background-color: If(@cond,  
        @text-color, @container-bg); 
} 
  
.text { 
    color: If(@cond,  
        @container-bg, @text-color); 
}

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 is as follows.

styles.css

body { 
    background: #eeeeee; 
} 
  
.container { 
    height: 100px; 
    width: 30.06957944%; 
    padding: 30px 0px 0px 95px; 
    background-color: #13055b; 
} 
  
.text { 
    color: #ffff00; 
}