Open In App

Less.js Color Operation fade() 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 CSS uses a dynamic style sheet language, it is more advantageous. LESS is adaptable enough to function in a variety of browsers. A computer language called the CSS pre-processor is used to build and enhance CSS so that web browsers may use it. It is also a language extension for CSS that offers resources like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while maintaining backward compatibility.

In this article, we are going to discuss the Color Operation fade() function in Less.JS, along with knowing their basic implementation through the illustration.

The fade() function is to regulate the exact opacity of a color object. Opacity can be set or reset. So this function takes hex value, RGB value, HSL or HSV value and it returns a value with that required opacity.

 

Syntax:

fade(color, amount)

Parameter values:

  • color: This is the first parameter and it is compulsory, it can be a hex value, RGB value, HSL, or HSV value.
  • amount: This parameter is also compulsory and it signifies the amount of opacity that is needed to be applied. This parameter takes a value from 0-100% range.

Please refer to the How to pre-compile LESS into CSS article for a detailed description.

Example 1: The below code example demonstrates the usage and implementation of the Color Operation fade() function in Less.Js.

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 Operation fade() Function</h3>
    <div class="c1">  
        <p>
              hsl(90, 100%, 50%)<br>
           (HSLA Value)<br>hsla(90, 100%, 50%, 0.35)
          </p>  
    </div>
</body>
  
</html>


styles.less: This is compiled into a CSS file which is given further below:

styles.less




@body-bg-color: #eeeeee;
  
body {
    background-color: @body-bg-color;
}
  
.c1 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: fade(hsl(90, 100%, 50%), 35%);
}
  
p {
    padding: 50px 0px 0px 45px;
}


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

lessc styles.less styles.css

style.css: The CSS output of the above Less file was compiled:

style.css




body {
    background-color: #eeeeee;
}
  
.c1 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: hsla(90, 100%, 50%, 0.35);
}
  
p {
    padding: 50px 0px 0px 45px;
}


Output:

 

Example 2: The below code example demonstrates the usage and implementation of the Color Operation fade() function with the if and boolean logical functions and the color type 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 Operation fade() Function</h3>
    <div class="c1">  
        <p>hsl(90, 100%, 50%)<br>
           (HSLA Value)<br>hsla(90, 100%, 50%, 0.35)</p>  
    </div>
</body>
  
</html>


style.less: This is compiled into a CSS file which is given further below:

style.less




@body-bg-color: #eeeeee;
@color: hsl(150, 100%, 39%);
@second: rgb(254, 255, 210);
@hex: fade(hsl(90, 100%, 50%), 95%);
@cond1: boolean(iscolor(@hex));
  
body {
    background-color: @body-bg-color;
}
  
.c1 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: if(@cond1, @second, @color);
}
  
p {
    padding: 50px 0px 0px 45px;
    color: @hex;
}


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

lessc styles.less styles.css

style.css: The CSS output of the above Less file was compiled.

style.css




body {
    background-color: #eeeeee;
}
  
.c1 {
    width: 250px;
    height: 150px;
    margin: 1rem;
    background-color: #feffd2;
}
  
p {
    padding: 50px 0px 0px 45px;
    color: hsla(90, 100%, 50%, 0.95);
}


Output:

 

Reference: https://lesscss.org/functions/#color-operations-fade 



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