Less - Math Functions

LESS - Math Functions

Description

LESS provides a set of built-in math functions for performing numeric operations. These functions can operate on numbers with or without units. When units are involved, LESS attempts to calculate them correctly (e.g., 2px * 2 = 4px).

The following table lists common Math Functions available in LESS:

ID	Function & Description	Example & Output
1	`ceil(number)` Rounds a number up to the next highest integer.	`ceil(2.3)` compiles to: `3`
2	`floor(number)` Rounds a number down to the next lowest integer.	`floor(2.8)` compiles to: `2`
3	`percentage(number)` Converts a floating-point number (0-1) to a percentage string.	`percentage(0.75)` compiles to: `75%`
4	`round(number, decimalPlaces?)` Rounds a number to the nearest integer or to a specified number of decimal places (optional).	`round(3.14159, 2)` compiles to: `3.14` `round(3.7)` compiles to: `4`
5	`sqrt(number)` Calculates the square root of a number. The unit of the result will be the square root of the input unit if possible (e.g., `sqrt(16px*px)` might be `4px`, but `sqrt(16px)` is an error). Best used with unitless numbers or ensure valid unit math.	`sqrt(25)` compiles to: `5`
6	`abs(number)` Calculates the absolute value of a number, preserving its unit.	`abs(-15px)` compiles to: `15px`
7	`sin(angle)` Calculates the sine of an angle. Expects a unitless number (radians) or a number with an angle unit (deg, grad, rad, turn).	`sin(1rad)` compiles to approximately: `0.8414709848`
8	`asin(number)` Calculates the arcsine (inverse of sine) of a number. Returns an angle in radians between -pi/2 and pi/2.	`asin(1)` compiles to approximately: `1.5707963268rad` (pi/2)
9	`cos(angle)` Calculates the cosine of an angle. Expects a unitless number (radians) or a number with an angle unit.	`cos(0)` compiles to: `1`
10	`acos(number)` Calculates the arccosine (inverse of cosine) of a number. Returns an angle in radians between 0 and pi.	`acos(-1)` compiles to approximately: `3.1415926536rad` (pi)
11	`tan(angle)` Calculates the tangent of an angle. Expects a unitless number (radians) or a number with an angle unit.	`tan(45deg)` compiles to approximately: `1`
12	`atan(number)` Calculates the arctangent (inverse of tangent) of a number. Returns an angle in radians between -pi/2 and pi/2. Can also take two arguments `atan(y, x)` to compute the angle for a coordinate.	`atan(1)` compiles to approximately: `0.7853981634rad` (pi/4)
13	`pi()` Returns the mathematical constant Pi.	`pi()` compiles to approximately: `3.141592653589793`
14	`pow(base, exponent)` Calculates the value of the first argument raised to the power of the second argument.	`pow(2, 3)` compiles to: `8`
15	`mod(number1, number2)` Calculates the modulus (remainder) of the first argument with respect to the second argument. Handles negative and floating-point numbers.	`mod(10, 3)` compiles to: `1`
16	`min(value1, value2, ...)` Returns the smallest value from one or more arguments. Arguments should have compatible units or be unitless.	`min(10px, 5px, 12px)` compiles to: `5px`
17	`max(value1, value2, ...)` Returns the largest value from one or more arguments. Arguments should have compatible units or be unitless.	`max(10, 25, 15)` compiles to: `25`

Using Math Functions in Practice:

Math functions are often used with variables to create dynamic and maintainable stylesheets. For example, calculating dynamic padding or font sizes based on a base value.

Consider this example:

@base-font-size: 16px;
@scale-factor: 1.5;

.title {
  font-size: round(@base-font-size * @scale-factor);
  line-height: percentage(1.4);
}

.container {
  padding: ceil(@base-font-size / 2);
}

This LESS code would compile to:

.title {
  font-size: 24px; /* 16 * 1.5 = 24 */
  line-height: 140%;
}

.container {
  padding: 8px; /* 16 / 2 = 8 */
}

Further Learning:

For details on unit conversions and strict math mode, refer to the official LESS documentation on Operations.