Less.js Math mod() Function

Last Updated : 10 Nov, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is chosen because CSS is a dynamic style sheet language. LESS is flexible, thus it functions with a variety of browsers. Web browsers can only use CSS that has been written in and processed using the CSS pre-processor, a programming language. It is a CSS language extension that also offers features like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss the Math mod() function, which is used to do the modulo operation between the first and second number which is passed to the function. This function takes two floating numbers as parameters and divides the first number by the second number and returns the remainder of that operation.

Syntax:

mod(number, number)

Parameters:

number: This is the first compulsory parameter for this function. This parameter takes a floating number.
number: This is the second compulsory parameter for this function. This parameter takes a floating number.

Compile LESS code into CSS code.

Example 1: The code below demonstrates the usage and implementation of the Misc mod() function and the code shows how the dimensions of the first parameter are the dimension of the returned value.

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 Math mod() Function</b></h3> 
    <div class="c1">   
        <p class="p1"> 
            <strong> 
                width: mod(230rem, 100%)<br> 
                width: 30rem<br> 
            </strong> 
        </p> 
    </div> 
</body> 
  
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@val: mod(230rem, 100%); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width:  @val; 
    height: 200px; 
    margin: 1rem; 
    background-color: @light; 
} 
.p1 { 
    padding: 80px 0px 0px 100px; 
    color: @dark; 
}

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:

styles.css:

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
      width: 30rem; 
      height: 200px; 
      margin: 1rem; 
      background-color: #fdff92; 
} 
.p1 { 
      padding: 80px 0px 0px 100px; 
      color: hsl(25, 71%, 8%); 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Misc mod() function and the code shows how the dimensions of the first parameter are the dimension of the returned value. We have also used the ispercentage() and 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 Math mod() Function</b></h3> 
    <div class="c1">   
        <p class="p1"> 
            <strong> 
                width: mod(135%, 100px)<br> 
                width: 35%;<br> 
                boolean(ispercentage(@val)) 
                <br> TRUE 
            </strong> 
        </p> 
    </div> 
</body> 
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@val: mod(135%, 100px); 
@cond: boolean(ispercentage(@val)); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width:  @val; 
    height: 250px; 
    margin: 1rem; 
    background-color: if(@cond, @dark, @light); 
} 
.p1 { 
    padding: 80px 0px 0px 100px; 
    color: if(@cond, @light, @dark); 
}

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:

styles.css:

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
    width: 35%; 
    height: 250px; 
      margin: 1rem; 
      background-color: hsl(25, 71%, 8%); 
} 
.p1 { 
      padding: 80px 0px 0px 100px; 
      color: #fdff92; 
}