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 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 ( mⁿ ) 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>

styles.less

@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>

styles.less

@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