Less.js Math pi() Function
Last Updated :
28 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, it works 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 pi() function, which is used to generate the pi value. This function takes no parameter and returns the number i.e, the value of pi.
Syntax:
pi()
Parameters: none
Please refer to the Compile LESS code into CSS code. article for a detailed description of the installation procedure.
Example 1: The code below demonstrates the usage and implementation of the Misc pi() function.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="styles.css" />
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Less.js Math pi() Function</h3>
<div class="c1">
<p class="p1">
<strong>
pi()
<br> 3.14159265
</strong>
</p>
</div>
</body>
</html>
styles.less:
CSS
@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: pi();
body {
background-color: @body-bg-color;
}
.c1 {
width: 180px * @val;
height: 100px * @val;
margin: 1rem * @val;
background-color: @dark;
}
.p1 {
padding: 100px 0px 0px 180px;
font-size: 0.5rem * @val;
color: @light;
}
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
styles.css: The compiled CSS file comes to be:
CSS
body {
background-color: #eeeeee;
}
.c1 {
width: 565.48667765px;
height: 314.15926536px;
margin: 3.14159265rem;
background-color: hsl(25, 71%, 8%);
}
.p1 {
padding: 100px 0px 0px 180px;
font-size: 1.57079633rem;
color: #fdff92;
}
Output:
Example 2: The code below demonstrates the usage and implementation of the Misc pi() function along with isnumber type function 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>Less.js Math pi() Function</h3>
<div class="c1">
<p class="p1">
<strong>
boolean(isnumber(@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: pi();
@cond: boolean(isnumber(@val));
body {
background-color: @body-bg-color;
}
.c1 {
width: 150px * @val;
height: 75px * @val;
margin: 0.5rem * @val;
background-color: if(@cond, @light, @dark);
}
.p1 {
padding: 80px 0px 0px 120px;
color: if(@cond, @dark, @light);
}
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
styles.css: The compiled CSS file comes to be:
CSS
body {
background-color: #eeeeee;
}
.c1 {
width: 471.23889804px;
height: 235.61944902px;
margin: 1.57079633rem;
background-color: #fdff92;
}
.p1 {
padding: 80px 0px 0px 120px;
color: hsl(25, 71%, 8%);
}
Output:
Reference: https://lesscss.org/functions/#math-functions-pi
Similar Reads
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 pow() 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 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 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 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 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