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
p { 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;">neveropen</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;">neveropen</h2> <div class="container"> </div> </body> </html> |
Output:
Reference: https://lesscss.org/functions/#math-functions-max
