What is the use of e() function in Less?

In Less, the e() function is primarily used to output strings as raw CSS syntax, ensuring that any input string is rendered without processing. This function allows developers to insert unprocessed, valid CSS code blocks directly into Less files.

Use Cases

Suppose you need to use certain CSS properties or values that might be processed or unrecognized in Less. Using the e() function ensures that the code is output exactly as specified, without being parsed or altered by Less.

Example:

Suppose we need to use CSS variables (custom properties) in CSS, which are features not directly supported in Less:

less
@primary-color: #4a90e2;
@cssVariable: e("--main-color");

.selector {
  @{cssVariable}: @primary-color;
}

In the above example, the e() function ensures that --main-color is output as a raw string, not processed as a variable by Less. The compiled CSS will then correctly render as:

css
.selector {
  --main-color: #4a90e2;
}

Here, the e() function facilitates the correct implementation of CSS custom properties, which cannot be directly implemented in a pure Less environment. Using e() allows developers to incorporate the latest CSS features in Less files without limitations.