Open In App

Less.js Color Blending negation() 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 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 this article, we are going to discuss the Color Blending negation() function, whose work is to subtract the first input color from the second 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 second color. On subtracting the complete white color from the second color the resultant color is the complete inverse of the second color object.

Syntax:

 negation(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 negation() function.

index.html




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Color Blending negation() Function</b></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 class="result">  
            <p>(Resultant)<br>#f0bdfa</p>  
        </div>  
    </div>  
</body>
  
</html>


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: 1rem;
    background-color: negation(@color1, @color2);  
}  
p{  
    padding: 50px 0px 0px 20px;  
}


Now, 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: 

style.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: 1rem;
    background-color: #f0bdfa;
}
p {
    padding: 50px 0px 0px 20px;
}


Output:

 

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

index.html




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Color Blending difference() Function</b></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 class="result">  
            <p>(Resultant)<br>#dc9d2d</p>  
        </div>  
    </div>  
</body>
  
</html>


styles.less




@body-bg-color: #eeeeee;
@color1: rgb(0, 200, 100);
@color2: rgb(220, 43, 55);
@resultant: negation(@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: 1rem;
    background-color: if(@cond1, @resultant, @color2);  
}  
p{  
    padding: 50px 0px 0px 20px;  
}


Now, 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: 

style.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: 1rem;
    background-color: #dcf39b;
}
p {
    padding: 50px 0px 0px 20px;
}


Output:

 

Reference: https://lesscss.org/functions/#color-blending-negation 



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