Less (Leaner Style Sheets) is an extension to normal CSS which is basically used to enhance the abilities of normal CSS code and provide it superpowers.
The percentage() function is a type of Math function in Less.js (which is basically used to perform mathematical operations). The percentage() function is used to convert any numeric floating point value to a percentage value. For example, using the percentage function on a value of 0.5 will return 50% as the output.
Parameters:
- number: Any numeric floating point value. For example: 0.3, 13, 2.5 etc.
Â
Syntax:
percentage(number)
Example 1: In this example, we want that the width of the container becomes equal to 25% but we have a variable, @width, which is storing the value 0.25. We use the percentage() function on this and apply the width to the container.
HTML
<!DOCTYPE html> <html lang="en"> <head> Â Â Â Â <meta charset="UTF-8"> Â Â Â Â <meta http-equiv="X-UA-Compatible" content="IE=edge"> Â Â Â Â <meta name="viewport" content= Â Â Â Â Â Â Â Â Â Â "width=device-width, initial-scale=1.0"> Â Â Â Â <title>Less.js Math percentage() Function</title> Â Â Â Â <link rel="stylesheet" href="styles.css"> </head> <body>Â Â Â Â Â Â Â Â <div class="container"> Â Â Â Â Â Â Â Â <h1 style="color: green;">neveropen</h1> Â Â Â Â Â Â Â Â <h3>Less.js Math percentage() Function</h3> Â Â Â Â </div> </body> </html> |
styles.less: The LESS code is as follows.
CSS
@width: 0.25; Â Â .container { Â Â Â Â border: 2px solid black; Â Â Â Â Â Â width: percentage(@width); } |
Syntax: To compile the above LESS code into normal CSS, run the following command.
lessc styles.less styles.css
styles.css: The output CSS file looks like the following
CSS
.container { Â Â Â Â border: 2px solid black; Â Â Â Â width: 25%; } |
Output:
Output of Less.js Math percentage() function example 1
Example 2: In this example, we have calculated the sine of 20 degrees using the sin() function of Less.js. We have converted the value to a percentage value and applied it to the height and width of the container class.
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content=         "width=device-width, initial-scale=1.0">     <title>Less.js Math percentage() Function</title>     <link rel="stylesheet" href="/styles.css"> </head>   <body>     <div class="container">         <h1 style="color: green;">             neveropen         </h1>                <h3>Less.js Math percentage() Function</h3>     </div> </body> </html> |
styles.less: The LESS code is as follows.
CSS
@value: sin(20deg); Â Â body { Â Â Â Â height: 100vh; } Â Â .container { Â Â Â Â border: 2px solid black; Â Â Â Â height: percentage(@value); Â Â Â Â width: percentage(@value); } |
Syntax: To compile the above LESS code into normal CSS, run the following command.
lessc styles.less styles.css
styles.css: The output CSS file looks like the following.Â
CSS
body { Â Â Â Â height: 100vh; } Â Â .container { Â Â Â Â border: 2px solid black; Â Â Â Â height: 34.20201433%; Â Â Â Â width: 34.20201433%; } |
Output:
Output of Less.js Math percentage() function example 2
Reference: https://lesscss.org/functions/#math-functions-percentage
