Less Color Blending exclusion()

The Less color blending exclusive function is similar to difference function but with lower contrast.

Parameters:

color1: It specifies a color object which act as minuend.
color2: It specifies a color object which act as subtrahend.

Returns: Resultant color.

Exclusion Function Example

Let's take an example to demonstrate the usage of color blending exclusion function in Less file.

Create a HTML file named "simple.html", having the following data.

HTML file: simple.html

<!DOCTYPE html>
<html>
<head>
   <title>Exclusion Function Example</title>
   <link rel="stylesheet" type="text/css" href="simple.css"/>
</head>
<body>
<h2>Example of Color Blending Exclusion Function</h2>
<div class="color1">
  <p>(color1) <br> #ff6600</p>
</div><br>
<div class="color2">
  <p>(color2) <br> #333333</p>
</div><br>
<div class="res">
  <p>(result) <br> #cc7033</p>
</div>
</body>
</html>

Now create a file named "simple.less". It is similar to CSS file. The only one difference is that it is saved with ".less" extension.

LESS file: simple.less

.color1 {
    width: 100px;
    height: 100px;
    background-color: #ff6600;
}
.color2 {
    width: 100px;
    height: 100px;
    background-color: #333333;
}
.res {
    width: 100px;
    height: 100px;
    background-color: exclusion(#ff6600, #333333);
}
p{
 padding: 30px 0px 0px 25px;
}

Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

The generated CSS "simple.css", has the following code:

.color1 {
  width: 100px;
  height: 100px;
  background-color: #ff6600;
}
.color2 {
  width: 100px;
  height: 100px;
  background-color: #333333;
}
.res {
  width: 100px;
  height: 100px;
  background-color: #cc7033;
}
p {
  padding: 30px 0px 0px 25px;
}

Output: