Open In App

Less.js Math max() Function

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to learn about the math max() function in Less.js. Less.js is an extension of CSS which comes with some exclusive additional features than CSS which will help us to write better CSS code.

max(): The max() method in Less.js is used to get the maximum value among all the given values through parameters.

Syntax:

max(value1, value2, value3 ... );

 

Parameters:

  • value: It accepts one or more than one numerical value and returns the highest value.

Example 1: In this example, we are going to calculate the height and width of the container using the max() method and apply it to the HTML div.

style.less:

CSS




@height: 100px;
@normal_height: 200px;
@max_height: 300px;
  
@width: 100px;
@normal_width: 200px;
@max_width: 300px;
  
p
{
    font-size: max(10px,20px,30px,40px);
    color: green;
}
.container
{
    height: max(@height,@normal_height,@max_height);
    width: max(@width, @normal_width, @max_width);
    background-color: gray;
}


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

lessc style.less style.css

The compiled CSS file comes to be: 

style.css:

CSS




{
    font-size: 40px;
    color: green;
}
.container {
    height: 300px;
    width: 300px;
    background-color: gray;
}


index.html:

HTML




<!DOCTYPE html>
<html lang="en">
<head>   
    <title>Less.js max() method</title>
    <link rel="stylesheet" href="style.css" 
          type="text/css" />
</head>
  
<body>
    <h2 style="color:green;">GeeksforGeeks</h2>
    <div class="container">
      
    </div>    
</body>
</html>


Output:

 

Example 2:  In this another working example of the max() function of Less.js, we are going to calculate the font size of the text and use the largest value using the max() function.

style.less:

CSS




@normal_font_size : 25px;
@medium_font_size : 30px;
@large_font_size : 40px;
  
p{
    color: green;
    font-size: max(@normal_font_size, 
      @medium_font_size, @large_font_size);
}


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

lessc style.less style.css

The compiled CSS file comes to be: 

style.css:

CSS




p {
    color: green;
    font-size: 40px;
}


index.html:

HTML




<!DOCTYPE html>
<html lang="en">
<head>   
    <title>Less.js max() method</title>
    <link rel="stylesheet" href="style.css" 
          type="text/css" />
</head>
  
<body>
    <h2 style="color:green;">GeeksforGeeks</h2>
    <div class="container">
      
    </div>    
</body>
</html>


Output:

 

Reference: https://lesscss.org/functions/#math-functions-max



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