Less.js Math min() Function

Last Updated : 28 Apr, 2025

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS is a dynamic style sheet language, it was chosen. Because LESS is adaptable, it works with a wide range of browsers. Only CSS that has been written and processed using the CSS pre-processor, a computer language, can be used by web browsers. In addition to providing capabilities like variables, functions, mixins, and operations to help create dynamic CSS while maintaining backward compatibility, it is a CSS language extension.

In this article, we are going to discuss the Math min() function, which is used to find the minimum value from a list values. This function takes a list of numbers or values as a parameter and finds the minimum of the values and returns that value.

Syntax:

min(values)

Parameters:

values: This is the only compulsory parameter for this function. This parameter takes a list of values.

Return type: This method returns the type of value whatever is there inside the list of values.

Click here to know how to compile LESS in CSS.

Example 1: The code below demonstrates the usage and implementation of the Math min() 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 Math min() Function</h3>
  
    <div class="c1">  
        <p class="p1">
            <strong>
                width: min(500px, 600px, 630px, 
                  750px, 680px, 720px, 600px)
                <br> height: min(200px, 300px, 
                  330px, 450px, 380px, 420px, 500px)
            </strong>
        </p>
    </div>
</body>

</html>

styles.less:

CSS

@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: min(500px, 600px, 630px, 750px, 680px, 720px, 600px);
@dval: min(200px, 300px, 330px, 450px, 380px, 420px, 500px);
body {
    background-color: @body-bg-color;
}
.c1 {
    width: @val;
    height: @dval;
    margin: 1rem;
    background-color: @dark;
}
.p1 {
    padding: 60px 0px 0px 30px;
    color: @light;
}

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

lessc style.less style.css

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

CSS

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

Output:

Example 2: The code below demonstrates the usage and implementation of the Math min() function along with ispixel type function 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 Math min() Function</h3>
  
    <div class="c1">  
        <p class="p1">
            <strong>
                boolean(ispixel <br>
                (minimum value))
                <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: min(200px, 300px, 330px, 450px, 380px, 420px, 500px);
@dval: min(200px, 300px, 330px, 450px, 380px, 420px, 500px) * 2;
@cond: boolean(ispixel(@val));
body {
    background-color: @body-bg-color;
}
.c1 {
    width: @dval;
    height: @val;
    margin: 1rem;
    background-color: if(@cond, @light, @dark);
}
.p1 {
    padding: 60px 0px 0px 100px;
    color: if(@cond, @dark, @light);
}

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

lessc style.less style.css

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

CSS

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