LESS String Functions

LESS's string functions are used far less often than color or math functions, but they're essential when you need to build a dynamic string value, escape LESS-sensitive characters, or substitute part of a string.

What Do LESS String Functions Do?

The e() function escapes a string, converting it into an unquoted value that bypasses further LESS processing, useful for values LESS might otherwise try (and fail) to parse as an expression.

The %() function formats a string similarly to sprintf in other languages, substituting placeholders with provided values, and replace() performs pattern-based find-and-replace on a string.

@radius: e("8px"); // escaped, treated as a literal string value

.card {
  border-radius: @radius;
}

e() is most useful for values containing characters LESS's parser might otherwise misinterpret.

String Function Syntax

e(@string)
%(@format-string, @values...)
replace(@string, @pattern, @replacement, @flags)

e() takes a single string and returns it unquoted, exactly as written.
The tilde syntax ~"..." is a shorthand equivalent to wrapping a string in e("...").
%() uses %s (string) and %d (number) placeholders, filled in order by additional arguments.
replace() accepts an optional flags argument, like "g" for a global (all-occurrences) replacement.

LESS String Functions Cheatsheet

Common string manipulation patterns.

Function	Example	Result
e()	`e("raw-value")`	raw-value (unquoted, unprocessed)
Tilde escape	`~"raw-value"`	Same effect as e("raw-value")
Format string	`%("%s-%d", "item", 3)`	"item-3"
replace()	`replace("hello", "l", "L")`	"heLlo" (first match only)
Global replace	`replace("hello", "l", "L", "g")`	"heLLo" (all matches)

Escaping Values with e() and ~"..."

Both e("...") and the shorthand ~"..." tell LESS to treat the given string as a literal, unprocessed value. This is most useful for CSS syntax LESS's parser doesn't natively understand, or values that would otherwise be misread as LESS operations.

@ie-only: e("expression(this.runtimeStyle.zoom = '1')");
@media-query: ~"(min-width: 768px) and (max-width: 1023px)";

Formatting Dynamic Strings

The %() function is useful for constructing dynamic string values, like a data URI, an SVG fill parameter, or a formatted content value, from variables.

@name: "icon";
@index: 3;

.label {
  content: %("%s-%d", @name, @index); // "icon-3"
}

replace() in Practice

replace() performs a regular-expression-style substitution on a string, which can be handy for transforming a variable value (like swapping a delimiter) without hardcoding multiple similar variables.

@path: "assets/icons/menu.svg";
@updated: replace(@path, "menu", "close"); // "assets/icons/close.svg"

Common Mistakes

Reaching for replace() to do complex text processing that would be far simpler in a build script or JavaScript, outside of LESS entirely.
Forgetting the "g" flag on replace() and being surprised only the first match was substituted.
Using e() unnecessarily on values that LESS would already treat literally, adding needless complexity.
Confusing the %() format function's %s/%d placeholders with JavaScript template literals.

Key Takeaways

e("...") and the equivalent ~"..." shorthand escape a string from further LESS processing.
%() formats a string using %s/%d placeholders, similar to sprintf-style formatting.
replace() performs pattern-based substitution, with an optional "g" flag for global replacement.
String functions are used far less often than color or math functions, but solve real edge cases when needed.

Pro Tip

Reach for the ~"..." escape shorthand first; it's more concise than e("...") and covers the vast majority of real-world cases where you need a literal, unprocessed string value.