Open In App

Less.js Color Channel saturation() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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 



Last Updated : 27 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads