Less.js Color Operation spin() 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 better since it makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. CSS is created and improved using a computer language known as the CSS pre-processor so that web browsers may use it. It also provides tools like variables, functions, mixins, and operations to help with the production of dynamic CSS while keeping backward compatibility. This is an extension to the CSS language.

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

The spin() function is used to rotate the angle of the selected color object. This function performs a mod 360 operation. So this function takes hex value, RGB value, HSL or HSV value and it returns a value with that required opacity.

Syntax:

spin(color, amount)

Parameter values:

color: This is the first parameter and it is compulsory, 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 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 spin() 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>Less.js Color Operation spin() Function</h3> 
      
    <div class="c1"> 
        <p> 
            spin(hsl(90, 100%, 50%), 25)<br> 
            (HSL Value)<br>hsl(115, 100%, 50%) 
        </p> 
    </div> 
</body> 
  
</html>

style.less

@body-bg-color: #eeeeee; 
  
body { 
    background-color: @body-bg-color; 
} 
.c1 {   
    width: 350px;   
    height: 150px;   
    margin: 1rem; 
    background-color: spin(hsl(90, 100%, 50%), 25);   
}   
p {   
    padding: 40px 0px 0px 20px;   
}

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

lessc style.less style.css

The CSS output of the above Less file is compiled into the following file.

style.css

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 350px; 
    height: 150px; 
    margin: 1rem; 
    background-color: hsl(115, 100%, 50%); 
} 
  
p { 
    padding: 40px 0px 0px 20px; 
}

Output:

Example 2: The below code example demonstrates the usage and implementation of the Color Operation spin() 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>Less.js Color Operation spin() Function</h3> 
      
    <div class="c1"> 
        <p> 
            spin(hsla(90, 100%, 50%, 0.8), 65)<br> 
            (HSLA Value)<br>hsla(155, 100%, 50%, 0.8) 
        </p> 
    </div> 
</body> 
  
</html>

style.less

/* styles.less */
@body-bg-color: #eeeeee; 
@color: hsl(177, 100%, 39%); 
@second: rgb(58, 21, 11); 
@hex: spin(hsla(90, 100%, 50%, 0.8), 65); 
@cond1: boolean(iscolor(@hex)); 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: if(@cond1, @second, @color); 
} 
  
p { 
    padding: 40px 0px 0px 15px; 
    color: @hex; 
}

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

lessc styles.less styles.css

The CSS output of the above Less file was compiled.

style.css

/* styles.less */
body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #3a150b; 
} 
  
p { 
    padding: 40px 0px 0px 15px; 
    color: hsla(155, 100%, 50%, 0.8); 
}