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 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. The various math functions in Less.js, are described below:
1. ceil: It is used to round up the given number to the next highest integer.
Syntax:
ceil(number)
Parameter:
- number: It accepts a floating point number and returns an integer type value.
2. floor: It is used to round down the given number to the next lowest integer.
Syntax:
floor(number)
Parameter:
- number: It accepts a floating point number and returns an integer type value.
3. percentage: It is used to convert a decimal/floating point number to a percentage.
Syntax:
percentage(number)
Parameter:
- number: It accepts a floating point number and returns a number.
4. round: It is used to round off a number up to the given decimal places (by default up to 0 decimal places).
Syntax:
round(number, decimalPlaces)
Parameter:
- number: It accepts a floating point number and returns a number.
- decimalPlaces: It rounds off the number to the decimal point. It is an optional parameter and its default value is 0.
5. sqrt: It is used to find out the square root of the given number. It keeps the unit the same without changing it.
Syntax:
sqrt(number)
Parameter:
- number: It accepts a floating point number and returns a number.
6. abs: It is used to calculate the absolute value of the given number. It keeps the unit the same without changing it.
Syntax:
abs(number)
Parameter:
- number: It accepts a floating point number and returns a number.
7. sin: It is used to calculate the sine value of the given number. If the number is without a unit then assume the given number to be in radians.
Syntax:
sin(angle)
Parameter:
- angle: It accepts a floating point number and returns a number.
8. asin: It is used to calculate the inverse sine value of the given number. Accepts decimal value between [-1, 1] as a parameter and returns a value between [-π/2, π/2] in radians.
Syntax:
asin(num_bet_neg1_to_1)
Parameter:
- num_bet_neg1_to_1: It accepts a floating point number between -1 to 1 interval and returns a number.
9. cos: It is used to calculate the cosine value of the given number. If the number is without unit then assumes the given number to be in radians.
Syntax:
cos(angle)
Parameter:
- angle: It accepts a floating point number and returns a number.
10. acos: It is used to calculate the inverse cosine value of the given number. Accepts decimal value between [-1, 1] as a parameter and returns a value between [0, π] in radians.
Syntax:
acos(num_bet_neg1_to_1)
Parameter:
- num_bet_neg1_to_1: It accepts a floating point number between -1 to 1 interval and returns a number.
11. tan: It is used to calculate the tangent value of the given number. If the number is without a unit then assume the given number to be in radians.
Syntax:
tan(angle)
Parameter:
- angle: It accepts a floating point number and returns a number.
12. atan: It is used to calculate the inverse tangent value of the given number. Returns value between [-π/2, π/2] in radians.
Syntax:
atan(number)
Parameter:
- number: It accepts a floating point number and returns a number.
13. pi: It is used to return the value of pi.
Syntax:
pi()
Parameter:
- It does not take any parameter and returns a number.
14. pow: It is used to calculate m raise to the power n ( mn ) where m is the first argument and n is the second argument. The unit/dimension of the first argument is the unit of the returned value as well.
Syntax:
pow(m, n)
Parameter:
- m: It accepts a floating point number as a base -a and returns a number.
- n: It accepts a floating point number as an exponent -a and returns a number.
15. mod: It is used to return the remainder when m is divided by n (m % n) where m is the first argument and n is the second argument. The unit/dimension of the first argument is the unit of the returned value as well. You can also give negative and decimal numbers as arguments.
Syntax:
mod(m, n)
Parameter:
- m: It accepts a floating point number and returns a number.
- n: It accepts a floating point number and returns a number.
16. min: It is used to find out the lowest value among the given parameters. You can enter any number of parameters.
Syntax:
min(value1, value2, ... valueN)
Parameter:
- value: It accepts one or more values to compare for minimum in them and returns the lowest value.
17. max: It is used to find out the highest value among the given parameters. You can enter any number of parameters.
Syntax:
max(value1, value2 .... valueN)
Parameter:
- value: It accepts one or more values to compare for minimum in them and returns the highest value.
Example 1: In this example, we have made the width of "div.container" equal to "1000px" by using the pow function by providing it with a parameter as (10px, 3). Then we have 2 font sizes available that is "@fontSize1" and "@fontSize2" and we make the font size of the body min out of font sizes (@fontSize1, @fontSize2, 16px).
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Logical Functions in Less.js</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <div class="container"> <h1>GeeksforGeeks</h1> <h3>Less.js Logical Functions</h3> </div> </body> </html>
@fontSize1: round(16.753px, 1); @fontSize2: ceil(15px + 1.3vh); body { font-size: min(@fontSize1, @fontSize2, 16px); } div.container { background-color: red; width: pow(10px, 3); margin: auto; } 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 body { font-size: 16px; } div.container { background-color: red; width: 1000px; margin: auto; } Output:
Example 2: In this example, we have used the "sin" function to calculate the border radius of the border applied to the h3 tag. Also, the width of the border is calculated using the "round" function and converted to an integer by providing 0 as the second argument and the width of the h3 tag is calculated using the "min" function. Along with that, the font weight of the h1 tag is calculated using the "max" function.
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Logical Functions in Less.js</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <div class="container"> <h1>GeeksforGeeks</h1> <h3>Less.js Logical Functions</h3> </div> </body> </html>
@font1: 100; @font2: 200; @font3: 400; @borderSize: 1px + 0.1vw; h1 { font-weight: max(@font1, @font2, @font3); color: green; } h3 { border: round(@borderSize, 0) solid red; border-radius: sin(3.14159rad); width: min(120px, 770px+20vw, 1000px); } 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 h1 { font-weight: 400; color: green; } h3 { border: 1px solid red; border-radius: 0.00000265; width: 120px; } Output:
Reference: https://lesscss.org/functions/#math-functions
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 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 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 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 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 cos() 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 cos() function is a Math Function in Less.js which is used to find out the cosine value of the argument provided and returns the output. In this articl
2 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 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
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 ceil() 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