Less.js Color Blending difference() 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. Because it uses a dynamic style sheet language, CSS is more useful. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use CSS, it must be enhanced and generated using a computer language known as the CSS pre-processor. It is also a CSS language extension that offers features like variables, functions, mixins, and operations to enable the creation of dynamic CSS while maintaining backward compatibility.

In our article, we will learn the Less.js Color Blending difference() function, whose work is to subtract the second input color from the first input color channel by channel. The negative values which come from the subtraction are inverted into positive. When we subtract complete black then there is no change in the resultant color and it is basically the first color. On subtracting the complete white color from the first color the resultant color is the complete inverse of the first color object.

Syntax:

difference(color1, color2)

Parameters:

color1: This is the first compulsory parameter which is a base color object, it can be a hex value, RGB value, HSL, or HSV value.
color2: This is the second compulsory parameter which is an overlay color object, it can be a hex value, RGB value, HSL, or HSV value.

Compile LESS code into CSS code

Example 1: The code below demonstrates the usage and implementation of the Color Blending difference() function.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Color Blending difference() Function</h3> 
      
    <div class="flex-container"> 
        <div class="c1"> 
            <p>(1st Color)<br>rgb(0, 153, 200)</p> 
        </div><br> 
          
        <div class="c2"> 
            <p>(2nd Color)<br>rgb(240, 36, 60)</p> 
        </div><br> 
    </div> 
      
    <div class="result"> 
        <p>(Resultant)<br>#f0758c</p> 
    </div> 
</body> 
  
</html>

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

styles.less

@body-bg-color: #eeeeee; 
@color1: rgb(0, 153, 200); 
@color2: rgb(240, 36, 60); 
  
.flex-container { 
    display: flex; 
    flex-direction: row; 
} 
  
.c1 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @color1; 
} 
  
.c2 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @color2; 
} 
  
.result { 
    width: 250px; 
    height: 150px; 
    margin: 3rem; 
    background-color: difference(@color1, @color2); 
} 
  
p { 
    padding: 50px 0px 0px 20px; 
}

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

lessc styles.less styles.css

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

styles.css

.flex-container { 
    display: flex; 
    flex-direction: row; 
} 
  
.c1 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #0099c8; 
} 
  
.c2 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #f0243c; 
} 
  
.result { 
    width: 250px; 
    height: 150px; 
    margin: 3rem; 
    background-color: #f0758c; 
} 
  
p { 
    padding: 50px 0px 0px 20px; 
}

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="styles.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Color Blending difference() Function</h3> 
      
    <div class="flex-container"> 
        <div class="c1"> 
            <p>(1st Color)<br>rgb(0, 200, 100)</p> 
        </div><br> 
  
        <div class="c2"> 
            <p>(2nd Color)<br>rgb(220, 43, 55)</p> 
        </div><br> 
    </div> 
      
    <div class="result"> 
        <p>(Resultant)<br>#dc9d2d</p> 
    </div> 
</body> 
  
</html>

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

styles.less

@body-bg-color: #eeeeee; 
@color1: rgb(0, 200, 100); 
@color2: rgb(220, 43, 55); 
@resultant: difference(@color1, @color2); 
@cond1: boolean(saturation(@resultant) > 50%); 
  
.flex-container { 
    display: flex; 
    flex-direction: row; 
} 
  
.c1 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @color1; 
} 
  
.c2 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: @color2; 
} 
  
.result { 
    width: 250px; 
    height: 150px; 
    margin: 3rem; 
    background-color: if(@cond1, @resultant, @color2); 
} 
  
p { 
    padding: 50px 0px 0px 20px; 
}

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

lessc styles.less styles.css

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

styles.css

.flex-container { 
    display: flex; 
    flex-direction: row; 
} 
  
.c1 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #00c864; 
} 
  
.c2 { 
    width: 150px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #dc2b37; 
} 
  
.result { 
    width: 250px; 
    height: 150px; 
    margin: 3rem; 
    background-color: #dc9d2d; 
} 
  
p { 
    padding: 50px 0px 0px 20px; 
}