Less.js Color Operation mix() Function

Last Updated : 25 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS uses a dynamic style sheet language, it is superior. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use CSS, it must be generated and refined using a computer language called the CSS pre-processor. Along with providing tools like variables, functions, mixins, and operations, it also maintains backward compatibility while assisting in the creation of dynamic CSS. This is a CSS language extension.

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

The mix() function is used to mix two colors in different proportions and produce a mixed output. The third parameter which is the amount denotes how much proportion of the first color is going to be, i.e., 50% means both are in equal proportions. So this function takes the hex value, RGB value, HSL or HSV value and it returns a value with that required opacity.

Syntax:

mix(color1, color2, amount)

Parameters:

color1: This is the first parameter and it is compulsory and it is the first color that will be mixed. It can be a hex value, RGB value, HSL, or HSV value.
color2: This is the first parameter and it is compulsory and it is the second color that will be mixed. 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 the 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 mix() 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><b>Less.js Color Operation mix() Function</b></h3> 
    <div class="c1">   
        <p>mix(rgb(128, 255, 0), rgb(6, 8, 136), 65%) 
          <br>(HEX Result)<br>#55a930</p>   
    </div> 
</body> 
  
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
  
body { 
    background-color: @body-bg-color; 
} 
.c1 {   
    width: 350px;   
    height: 150px;   
    margin: 1rem; 
    background-color: mix(rgb(128, 255, 0), rgb(6, 8, 136), 65%);   
}   
p {   
    padding: 40px 0px 0px 20px;   
}

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

lessc style.less style.css

The compiled CSS file comes to be:

style.css:

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #55a930; 
} 
p { 
      padding: 40px 0px 0px 20px; 
}

Output:

Example 2: The below code example demonstrates the usage and implementation of the Color Operation mix() 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><b>Less.js Color Operation mix() Function</b></h3> 
    <div class="c1">   
        <p>mix(#ff0000, #0000ff, 70%) 
          <br>(HEX Result)<br>#b3004d</p>   
    </div> 
</body> 
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
@color: hsl(177, 100%, 39%); 
@second: rgb(58, 21, 11); 
@hex: mix(#ff0000, #0000ff, 70%);  
@cond: boolean(iscolor(@hex)); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: if(@cond, @hex, @color); 
} 
p { 
    padding: 40px 0px 0px 15px; 
    color: if(@cond, @color, @second); 
}

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:

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
      width: 250px; 
      height: 150px; 
     margin: 1rem; 
      background-color: #b3004d; 
} 
p { 
    padding: 40px 0px 0px 15px; 
    color: hsl(177, 100%, 39%); 
}