Less.js Math pow() Function
Last Updated :
26 Apr, 2025
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is chosen because CSS is a dynamic style sheet language. LESS is flexible, thus it functions with a variety of browsers. Web browsers can only use CSS that has been written in and processed using the CSS pre-processor, a programming language. It is a CSS language extension that also offers features like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while keeping backward compatibility.
In this article, we are going to discuss the Math pow() function, which is used to return the first argument's value rounded up to the power of the second argument. This function takes two floating numbers as parameters and performs a to the power operation keeping the first number as a base and the second number as an exponent. The returned values have the same dimension as the first parameter and the dimension of the second parameter is ignored.
Syntax:
power(number, number)
Â
Parameters:
- number: This is the first compulsory parameter for this function. This parameter takes a floating number and this is the base for the power operation.
- number: This is the second compulsory parameter for this function. This parameter takes a floating number and this is the exponent for the power operation.
Compile LESS code into CSS code.
Example 1: The code below demonstrates the usage and implementation of the Misc pow() function.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3><b>Less.js Math pow() Function</b></h3>
<div class="c1">
<p class="p1">
<strong>
width: pow(20px, 2)
<br> width: 400px;
</strong>
</p>
</div>
</body>
</html>
styles.less:
CSS
@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: pow(20px, 2);
body {
background-color: @body-bg-color;
}
.c1 {
width: @val;
height: calc(@val/2);
margin: 1rem;
background-color: @light;
}
.p1 {
padding: 60px 0px 0px 80px;
color: @dark;
}
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
styles.css:Â
CSS
body {
background-color: #eeeeee;
}
.c1 {
width: 400px;
height: calc(400px/2);
margin: 1rem;
background-color: #fdff92;
}
.p1 {
padding: 60px 0px 0px 80px;
color: hsl(25, 71%, 8%);
}
Output:
Â
Example 2: The code below demonstrates the usage and implementation of the Misc pow() function and the code shows how the dimensions of the first parameter is the dimension of the returned value. We have also used the ispercentage() and the if() and boolean logical functions.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="styles.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3><b>Less.js Math pow() Function</b></h3>
<div class="c1">
<p class="p1">
<strong>
width: pow(6%, 2px);<br>
width: 36%;<br>
boolean(ispercentage(@val))
<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: pow(6%, 2px);
@cond: boolean(ispercentage(@val));
body {
background-color: @body-bg-color;
}
.c1 {
width: @val;
height: 250px;
margin: 1rem;
background-color: if(@cond, @dark, @light);
}
.p1 {
padding: 80px 0px 0px 100px;
color: if(@cond, @light, @dark);
}
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
styles.css:Â
CSS
body {
background-color: #eeeeee;
}
.c1 {
width: 36%;
height: 250px;
margin: 1rem;
background-color: hsl(25, 71%, 8%);
}
.p1 {
padding: 80px 0px 0px 100px;
color: #fdff92;
}
Output:
Â
Reference: https://lesscss.org/functions/#math-functions-powÂ
Similar Reads
Less.js Math pi() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is chosen because CSS is a dynamic style sheet language. LESS is flexible, it works with a variety of browsers. Web browsers can only use CSS that has been writ
3 min read
Less.js Math mod() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is chosen because CSS is a dynamic style sheet language. LESS is flexible, thus it functions with a variety of browsers. Web browsers can only use CSS that has
3 min read
Less.js Math Functions
In this article, we will see the various Math functions that are provided by Less.js to perform various mathematical functions as per the user's requirements within CSS code only. Less.js (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of normal CSS and giv
6 min read
Less.js Math round() Function
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
3 min read
Less.js Math min() Function
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
3 min read
Less.js Math tan() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. LESS is adaptable, so it works with a wide range of browsers. Only CSS that has been created and proc
3 min read
Less.js Math max() Function
In this article, we are going to learn about the math max() function in Less.js. Less.js is an extension of CSS which comes with some exclusive additional features than CSS which will help us to write better CSS code. max(): The max() method in Less.js is used to get the maximum value among all the
2 min read
Less.js Math sin() Function
Less (Leaner style sheets) is an extension to normal CSS which is basically used to enhance the abilities of normal CSS and give it superpowers. The sin() function is a math function provided by Less.js which is used to find out the sine value of the argument provided and returns the output. In this
3 min read
Less.js Math sqrt() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is more advantageous because CSS employs a dynamic style sheet language. Several different browsers can use LESS because of its flexibility. In order for web br
3 min read
Less.js Math abs() Function
Less (Leaner Style Sheets) is an extension to normal CSS code which is basically used to enhance the abilities of normal CSS code and provide it superpowers. The abs() function is a type of Math function in Less.js (which is basically used to perform mathematical operations). The abs() function is u
2 min read