Less.js Math percentage() Function
Last Updated :
11 Oct, 2022
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;">GeeksforGeeks</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;">
GeeksforGeeks
</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
Share your thoughts in the comments
Please Login to comment...