Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is an extension to normal CSS which basically enhances the abilities of normal CSS and gives superpowers to it. LESS.js provides the built-in Math function that can be used to customize the CSS properties, which helps to enhance the overall user experience.
In this article, we are going to discuss the Less.js Math round() Function. This math round() function is used to round off the given number to its nearest integer. This also helps us to round off the integer to the number of decimal places.
Syntax:
round(number)
Parameter: This function accepts a single parameter:
- number: It accepts a floating point number and returns an integer type value.
Return Value: This function returns a result after rounding the number passed as a parameter to the function.
Compile LESS code into CSS code
Below are some examples that illustrate the Less.js Math round() Function:
Example 1:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Less.js Math round() Function</title>
<link rel="stylesheet" href="gfgstyles.css">
</head>
<body>
<div>
<h1 class="gfg">
GeekforGeeks
</h1>
<h2>
Less.js | Math round() Function
</h2>
<p class="font-without-round p">
Font Size without round function
</p>
<p class="font-with-round p">
Font Size with round function
</p>
</div>
</body>
</html>
|
body { text-align: center;
} p { font-weight: bold;
} .gfg { color: darkgreen;
} .font-without-round { font-size: 0.7px * 20;
color: rgb(251, 71, 4);
} .font-with-round { font-size: round(0.7px) * 20;
color: rgb(87, 219, 57);
} |
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less gfgstyles.css
The compiled CSS file comes to be:
body { text-align: center;
} p { font-weight: bold;
} .gfg { color: darkgreen;
} .font-without-round { font-size: 14px;
color: #fb4704;
} .font-with-round { font-size: 20px;
color: #57db39;
} |
Output:
Example 2:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Less.js Math round() Function</title>
<link rel="stylesheet" href="gfgstyles.css">
</head>
<body>
<div>
<h1 class="gfg">
GeekforGeeks
</h1>
<h2>
Less.js | Math round() Function
</h2>
<div>
<button class="font-without-round p">
Without round
</button>
</div>
<div>
<button class="font-with-round p">
With round
</button>
</div>
</div>
</body>
</html>
|
body { text-align: center;
} .p { font-weight: bold;
display: center;
padding: 5px;
margin: 5px;
font-size: 20px;
} .gfg { color: darkgreen;
} .font-without-round { border: solid black .6px * 3;
color: rgb(251, 71, 4);
} .font-with-round { border: solid black round(1.8px) * 3;
color: rgb(87, 219, 57);
} |
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less gfgstyles.css
The compiled CSS file comes to be:
body { text-align: center;
} .p { font-weight: bold;
display: center;
padding: 5px;
margin: 5px;
font-size: 20px;
} .gfg { color: darkgreen;
} .font-without-round { border: solid black 1.8px;
color: #fb4704;
} .font-with-round { border: solid black 6px;
color: #57db39;
} |
Output:
Reference: https://lesscss.org/functions/#math-functions-round