Less.js Color Channel saturation() Function

Last Updated : 27 Sep, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the capabilities of CSS. LESS supports interoperability across browsers. In order to improve CSS and compile it for use by web browsers, a programming language called CSS pre-processor is employed. It is also a language extension for CSS that gives features like variables, functions, mixins, and operations that enable us to construct dynamic CSS while also supporting backward compatibility.

Less.js Color Channel saturation() function is used to extract the saturation value of the color object in the HSL color space. It returns a percentage value. It takes values in hex codes, RGB values, and HSL values

Syntax:

boolean(condition);

Parameter value:

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

Return value: The percentage value is returned with values ranging from 0-100.

Please refer to the Less.js Installation article for a detailed description.

Example 1: The below code example demonstrates the basic usage and implementation of the Color Channel saturation() 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 Channel saturation() Function</b>
    </h3>
    <div class="container">
    </div>
</body>

</html>

styles.less: This is compiled into a CSS file which is given further below.

CSS

@body-bg-color: #eeeeee;
@text-color: rgb(0, 200, 100);
@container-bg: rgb(220, 43, 55);

body {
    background: @body-bg-color;
}

.container{
    height:100px;    
    width:saturation(rgb(77, 168, 54));  
    padding: 30px 0px 0px 25px;  
    background-color: (#1ed4b9);  
    color:yellow;  
}

style.css: The CSS output of the above less file was compiled.

CSS

body 
{
   background: #eeeeee;
}
.container 
{
    height: 100px;
    width: 51.35135135%;
    padding: 30px 0px 0px 25px;
    background-color: #1ed4b9;
    color: yellow;
}

Output:

Example 2: The below code example demonstrates the usage and implementation of the Color Channel saturation() 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>
          <b>Less.js Color Channel saturation() Function</b>
      </h3>
    <div class="container"></div>
</body>

</html>

styles.less: This is compiled into a CSS file which is given further below:

CSS

@body-bg-color: #eeeeee;
@text-color: rgb(80, 188, 134);
@container-bg: rgb(255, 178, 24);
@cond1: boolean(saturation(@text-color) < 50%);

body 
{
   background: @body-bg-color;
}

.container
{
   height:100px;    
   width:saturation(rgb(100, 157, 86));  
   padding: 30px 0px 0px 25px;  
   background-color: if(@cond1, @container-bg, @text-color);  
   color:yellow;  
}

style.css: The CSS output of the above less file was compiled:

CSS

body 
{
    background: #eeeeee;
}
.container {
   height: 100px;
   width: 29.218107%;
   padding: 30px 0px 0px 25px;
   background-color: #ffb218;
   color: yellow;
}

Output:

Reference: https://lesscss.org/functions/#color-channel-saturation

Less.js Color Channel luma() Function

priyanshuchatterjee01

Improve

Article Tags :

Less.js Color Channel saturation() Function

Similar Reads

Thank You!

What kind of Experience do you want to share?