Less.js Color Channel alpha() 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. CSS is more practical as a result of its dynamic style sheet language. LESS has the flexibility to work with different browsers. A computer language called the CSS pre-processor is used to enhance and generate CSS so that web browsers may use it. Additionally, it is a CSS language extension that provides features like variables, functions, mixins, and operations that let us create dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss the Color Channel alpha() function is used to extract the alpha channel of the color object. It returns a positive decimal value (0-1). It takes values in hex codes, RGB values, HSL values, and HSV values.

Syntax:

alpha(value);

Parameters:

value: This is the parameter that is compulsory for the alpha function. It takes values in hex codes, RGB values, HSL values, and HSV values.

Compile LESS code into CSS code

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3>Less.js Color Channel alpha() Function</h3> 
    <div class="container"> 
        <p class="text"> 
            (alpha):0.6<br>(Width of Div):180px 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@container-bg: rgba(48, 0, 222, 0.6); 
@alpha: alpha(@container-bg); 
@cal: @alpha * 300px; 
  
body { 
    background: @body-bg-color; 
} 
  
.container { 
    height: 100px; 
    width: @cal; 
    padding: 30px 0px 0px 25px; 
    background-color: @container-bg; 
    color: yellow; 
} 
  
p { 
    font-weight: bold; 
}

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

lessc styles.less styles.css

styles.css

body { 
    background: #eeeeee; 
} 
  
.container { 
    height: 100px; 
    width: 180px; 
    padding: 30px 0px 0px 25px; 
    background-color: rgba(48, 0, 222, 0.6); 
    color: yellow; 
} 
  
p { 
    font-weight: bold; 
}

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3>Less.js Color Channel alpha() Function</h3> 
    <div class="container"> 
        <p class="text"> 
            Base color:<br>(alpha):0.6 
        </p> 
    </div> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@container-bg: #a35f1b99; 
@alpha: alpha(@container-bg); 
@cond: boolean(@alpha > 0.5); 
  
body { 
    background: @body-bg-color; 
} 
  
.container { 
    height: 100px; 
    width: 180px; 
    padding: 30px 0px 0px 90px; 
    background-color: if(@cond,  
        @container-bg, #00fff7c1); 
    color: if(@cond, #00fff7c1, @container-bg); 
} 
  
p { 
    font-weight: bold; 
}

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

lessc styles.less styles.css

styles.css: The compiled CSS file is as follows.

styles.css

body { 
    background: #eeeeee; 
} 
  
.container { 
    height: 100px; 
    width: 180px; 
    padding: 30px 0px 0px 90px; 
    background-color: #a35f1b99; 
    color: #00fff7c1; 
} 
  
p { 
    font-weight: bold; 
}