LESS Functions

LESS ships with a large library of built-in functions covering math, color manipulation, string handling, list operations, and type checking. This lesson focuses on the math, list, and type-check functions you'll use constantly outside of color work.

What Are LESS Functions?

A LESS function is called just like a CSS function, name(arguments), but is evaluated by the LESS compiler at build time instead of being passed through to the browser. The result replaces the function call in the compiled output.

Most built-in functions fall into a few categories: math (round(), ceil(), percentage()), list (length(), extract()), type-checking (isnumber(), iscolor()), and color manipulation, covered in its own dedicated lesson next.

@value: 3.7;

.box {
  width: percentage(1/3); // 33.333333%
  height: round(@value);  // 4
  margin: ceil(@value) * 1px; // 4px
}

Each of these calls is resolved to a plain numeric value before the CSS ever reaches the browser.

Function Call Syntax

function-name(arg1, arg2, ...)

Functions accept comma-separated arguments, just like mixin calls.
Built-in functions never need to be defined, they're always available.
A mixin that sets a variable and is called for its side effect is often used to emulate a custom function.
Functions can be nested inside other functions or expressions: round(percentage(1/3)).

LESS Built-in Functions Cheatsheet

Frequently used math, list, and type-check functions.

Function	Example	Result
percentage()	`percentage(0.5)`	50%
round()	`round(3.7)`	4
ceil()	`ceil(3.2)`	4
floor()	`floor(3.8)`	3
min() / max()	`max(10px, 20px)`	20px
length()	`length(4px, 8px, 16px)`	3
extract()	`extract(@list, 2)`	second item in @list
isnumber() / iscolor()	`iscolor(#fff)`	true

Math Functions in Detail

Rounding functions are commonly used to clean up the result of a division so it doesn't produce an unnecessarily long decimal value in the compiled CSS.

.column {
  width: round(percentage(1/3), 2); // 33.33%, rounded to 2 decimal places
}

round() optionally accepts a second argument controlling decimal precision.

List Functions in Detail

List functions let mixins inspect and pull individual items out of a list argument, which is especially useful in combination with recursive mixins or the each() function.

@breakpoints: 576px, 768px, 992px, 1200px;

.debug {
  content: length(@breakpoints);   // 4
  min-width: extract(@breakpoints, 2); // 768px
}

Emulating Custom Functions with Mixins

LESS doesn't support user-defined functions in the same way Sass's @function does, but a mixin that sets a variable as a side effect can achieve a similar result, and detached rulesets extend this pattern further.

.rem-from-px(@px, @base: 16px) {
  @result: (@px / @base) * 1rem;
}

.text {
  .rem-from-px(24px);
  font-size: @result; // 1.5rem
}

Common Mistakes

Expecting LESS to support user-defined @function blocks like Sass; LESS instead uses mixins with variable side effects.
Not rounding a divided value, resulting in unnecessarily long decimal numbers in the compiled CSS output.
Confusing length() (counts list items) with a string-length function; LESS has no built-in string-length function.
Forgetting extract() uses 1-based indexing, not 0-based.

Key Takeaways

Functions are called like name(args) and resolved by the compiler at build time.
Math functions like round(), ceil(), floor(), and percentage() clean up and format numeric values.
List functions like length() and extract() inspect and pull values out of a list.
A mixin that assigns a variable as a side effect can emulate a custom function LESS otherwise lacks.

Pro Tip

Use round(value, precision) whenever a division produces a long decimal, like a percentage-based grid column width, to keep your compiled CSS clean and readable in devtools.