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">neveropen</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">neveropen</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; } |
Output:
Reference: https://lesscss.org/functions/#color-channel-luma
