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 Less.js Math floor() Function. This math floor() function is used to round down the given number to its nearest integer in the Downward direction of rounding i.e. towards the lowest value.
Syntax:
floor(number)
Parameter: This function accepts a single parameter:
- number: It accepts a floating point number and returns an integer type value.
Return Value: 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 floor() Function:
Example 1:
HTML
<!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 floor() Function</title> <link rel="stylesheet" href="gfgstyles.css"> </head> <body> <div> <h1 class="gfg"> GeekforGeeks </h1> <h2> Less.js | Math floor() Function </h2> <p class="font-without-floor p"> Font Size without floor function </p> <p class="font-with-floor p"> Font Size with floor function </p> </div> </body> </html> |
style.less
.font-without-floor { font-size: 1.7px * 20; color: rgb(251, 71, 4); } .font-with-floor { font-size: floor(1.7px) * 20; color: rgb(87, 219, 57); } body { text-align: center; } p { font-weight: bold; } .gfg { color: darkgreen; } |
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:
gfgstyles.css
.font-without-floor { font-size: 34px; color: #fb4704; } .font-with-floor { font-size: 20px; color: #57db39; } body { text-align: center; } p { font-weight: bold; } .gfg { color: darkgreen; } |
Output:
Example 2:
HTML
<!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 floor() Function</title> <link rel="stylesheet" href="gfgstyles.css"> </head> <body> <div> <h1 class="gfg"> GeekforGeeks </h1> <h2> Less.js | Math floor() Function </h2> <div> <button class="font-without-floor p"> Without Floor </button> </div> <div> <button class="font-with-floor p"> With Floor </button> </div> </div> </body> </html> |
style.less
.font-without-floor { border: solid black 1.8px * 3; color: rgb(251, 71, 4); } .font-with-floor { border: solid black floor(1.8px) * 3; color: rgb(87, 219, 57); } body { text-align: center; } .p { font-weight: bold; display: center; padding: 5px; margin: 5px; font-size: 20px; } .gfg { color: darkgreen; } |
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:
gfgstyles.css
.font-without-floor { border: solid black 5.4px; color: #fb4704; } .font-with-floor { border: solid black 3px; color: #57db39; } body { text-align: center; } .p { font-weight: bold; display: center; padding: 5px; margin: 5px; font-size: 20px; } .gfg { color: darkgreen; } |
Output:
Reference: https://lesscss.org/functions/#math-functions-floor
