Less.js Math min() Function
Last Updated :
07 Nov, 2022
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;
}
.c 1 {
width : @val;
height : @dval;
margin : 1 rem;
background-color : @dark;
}
.p 1 {
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 ;
}
.c 1 {
width : 500px ;
height : 200px ;
margin : 1 rem;
background-color : hsl( 25 , 71% , 8% );
}
.p 1 {
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;
}
.c 1 {
width : @dval;
height : @val;
margin : 1 rem;
background-color : if(@cond, @light, @dark);
}
.p 1 {
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 ;
}
.c 1 {
width : 400px ;
height : 200px ;
margin : 1 rem;
background-color : #fdff92 ;
}
.p 1 {
padding : 60px 0px 0px 100px ;
color : hsl( 25 , 71% , 8% );
}
|
Output:
Reference: https://lesscss.org/functions/#math-functions-min
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...