Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is more advantageous because CSS employs a dynamic style sheet language. Several different browsers can use LESS because of its flexibility. In order for web browsers to use CSS, it must be built and enhanced using a computer language known as the CSS pre-processor. It is also a CSS language extension that provides tools like variables, functions, mixins, and operations to help create dynamic CSS while keeping backward compatibility.
In this article, we are going to discuss the Color Operation darken() Function is used to reduce the lightness channel of a color object. It takes values in hex codes, RGB values, HSL values, and HSV values.
Syntax:
darken(value, amount);
Â
Parameters:
- value: This is the parameter that is compulsory for the darken function. It takes values in hex codes, RGB values, HSL values, and HSV values.
- amount: This parameter is also compulsory and this parameter is used to specify the amount of light you want to reduce.
Please refer to the Less.js Installation article for a detailed description.
Example 1: The code below demonstrates the usage and implementation of the Color Channel darken() 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 Operation darken() Function</h3>           <div class="box">         <div class="container1">             <p class="text">                 Base Color<br>hsl(60, 50%, 52%)             </p>         </div>         <div class="container2">             <p class="text">                 Darkened Color<br>hsl(60, 50%, 32%)             </p>         </div>     </div> </body>   </html> |
styles.less
@body-bg-color: #eeeeee; @text-color: hsl(250, 90%, 19%); @container-bg: hsl(60, 50%, 52%); @color: darken(@container-bg, 20%); Â Â body { Â Â Â Â background: @body-bg-color; } Â Â .box { Â Â Â Â display: flex; } Â Â .container1 { Â Â Â Â height: 100px; Â Â Â Â width: 150px; Â Â Â Â padding: 20px; Â Â Â Â background-color: @container-bg; Â Â Â Â margin-right: 2rem; } Â Â .container2 { Â Â Â Â height: 100px; Â Â Â Â width: 150px; Â Â Â Â padding: 20px; Â Â Â Â background-color: @color; } Â Â .text { Â Â Â Â color: @text-color; } |
Syntax: To compile the above LESS code to CSS code, run the following command.
lessc styles.less styles.css
styles.css
body { Â Â Â Â background: #eeeeee; } Â Â .box { Â Â Â Â display: flex; } Â Â .container1 { Â Â Â Â height: 100px; Â Â Â Â width: 150px; Â Â Â Â padding: 20px; Â Â Â Â background-color: hsl(60, 50%, 52%); Â Â Â Â margin-right: 2rem; } Â Â .container2 { Â Â Â Â height: 100px; Â Â Â Â width: 150px; Â Â Â Â padding: 20px; Â Â Â Â background-color: hsl(60, 50%, 32%); } Â Â .text { Â Â Â Â color: hsl(250, 90%, 19%); } |
Output:
Â
Example 2: The code below demonstrates the usage and implementation of the Color Channel darken() 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 Operation darken() Function</h3>           <div class="box">         <div class="container1">             <p class="text">                 Base Color<br>#475cc2             </p>         </div>                   <div class="container2">             <p class="text">                 Darkened Color<br>#29377a             </p>         </div>     </div> </body>   </html> |
styles.less
@body-bg-color: #eeeeee; @text-color: #d8db95; @container-bg: #475cc2; @color: darken(@container-bg, 20%); @cond: boolean(lightness(@color) < 60%); Â Â body { Â Â Â Â background: @body-bg-color; } Â Â .box { Â Â Â Â display: flex; Â Â } Â Â .container1 { Â Â Â Â height: 100px; Â Â Â Â width: 150px; Â Â Â Â padding: 20px; Â Â Â Â background-color: if(@cond, @container-bg, @color); Â Â Â Â margin-right: 2rem; } Â Â .container2 { Â Â Â Â height: 100px; Â Â Â Â width: 150px; Â Â Â Â padding: 20px; Â Â Â Â background-color: if(@cond, @color, @container-bg); } Â Â .text { Â Â Â Â color: @text-color; } |
Syntax: To compile the above LESS code to CSS code, run the following command.
lessc styles.less styles.css
styles.css
body { Â Â Â Â background: #eeeeee; } Â Â .box { Â Â Â Â display: flex; } Â Â .container1 { Â Â Â Â height: 100px; Â Â Â Â width: 150px; Â Â Â Â padding: 20px; Â Â Â Â background-color: #475cc2; Â Â Â Â margin-right: 2rem; } Â Â .container2 { Â Â Â Â height: 100px; Â Â Â Â width: 150px; Â Â Â Â padding: 20px; Â Â Â Â background-color: #29377a; } Â Â .text { Â Â Â Â color: #d8db95; } |
Output:
Â
Reference: https://lesscss.org/functions/#color-operations-darken
