Less difference

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Less Color Blending difference()

The Less color blending difference function is used to subtract the second color from the first color on a channel by channel basis. Here, it must be cleared that negative values are inverted. Subtracting black color doesn't change in result while subtracting white color results in color inversion.

Parameters:

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

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

Returns: Resultant color.


Hardlight Function Example

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

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

HTML file: simple.html

 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Difference Function Example</title>  
  5.    <link rel="stylesheet" type="text/css" href="simple.css"/>  
  6. </head>  
  7. <body>  
  8. <h2>Example of Color Blending Difference Function</h2>  
  9. <div class="color1">  
  10.   <p>(color1) <br> #ff6600</p>  
  11. </div><br>  
  12. <div class="color2">  
  13.   <p>(color2) <br> #333333</p>  
  14. </div><br>  
  15. <div class="res">  
  16.   <p>(result) <br> #cc3333</p>  
  17. </div>  
  18. </body>  
  19. </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

  1. .color1 {  
  2.     width: 100px;  
  3.     height: 100px;  
  4.     background-color: #ff6600;  
  5. }  
  6. .color2 {  
  7.     width: 100px;  
  8.     height: 100px;  
  9.     background-color: #333333;  
  10. }  
  11. .res {  
  12.     width: 100px;  
  13.     height: 100px;  
  14.     background-color: difference(#ff6600, #333333);  
  15. }  
  16. p{  
  17.  padding: 30px 0px 0px 25px;  
  18. }  

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

Less Color blending difference function1

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

For example:

Less Color blending difference function2

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

  1. .color1 {  

  2.   width: 100px;  

  3.   height: 100px;  

  4.   background-color: #ff6600;  

  5. }  

  6. .color2 {  

  7.   width: 100px;  

  8.   height: 100px;  

  9.   background-color: #333333;  

  10. }  

  11. .res {  

  12.   width: 100px;  

  13.   height: 100px;  

  14.   background-color: #cc3333;  

  15. }  

  16. p {  

  17.   padding: 30px 0px 0px 25px;  

  18. }  

Output

Less Color blending difference function3