Less - Escaping

LESS - Escaping

Description

Escaping in LESS allows you to output arbitrary strings as CSS values or parts of selectors, without LESS attempting to interpret or compile them. This is useful for cases where you need to use non-standard syntax, proprietary browser extensions, or when a string might be mistaken for a LESS construct (like a variable or function call).

The primary way to escape a string is by prefixing it with a tilde (~) and enclosing it in quotes, like so: ~"string-to-escape".

Example

Let’s demonstrate escaping with a practical scenario where you might need to output a specific filter syntax for older Internet Explorer versions, or a CSS variable name that LESS might try to interpret.

Consider the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LESS Escaping Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Example using Escaping</h1>
    <p class="special-text">This text uses a custom property.</p>
    <div class="legacy-filter">This div has a legacy filter.</div>
</body>
</html>

Now, let’s create the style.less file:

style.less

// Variable that we want to use as a string literal for a CSS custom property name
@my-custom-prop-name: --custom-highlight-color;

.special-text {
  // Escaping is not strictly needed here if @my-custom-prop-name starts with --
  // but demonstrates how to output a variable's value as part of a property name if needed.
  // More commonly, for the value:
  @{my-custom-prop-name}: ~"#007bff"; // Use escaped string for the value
  color: var(@my-custom-prop-name);
}

.legacy-filter {
  // Example of an older, non-standard filter property
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')";
  // Another example: outputting a string that looks like a LESS function
  content: ~"attr(data-text) '(' counter(item) ')'";
}

// Example of escaping in selectors (less common, but possible)
@my-selector-suffix: "-active";
.button~"@{my-selector-suffix}" {
  font-weight: bold;
}

To compile style.less to style.css, you would use the LESS compiler. If you have LESS installed globally via npm, you can run:

lessc style.less style.css

After compilation, the style.css file will contain:

style.css

.special-text {
  --custom-highlight-color: #007bff;
  color: var(--custom-highlight-color);
}

.legacy-filter {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
  content: attr(data-text) '(' counter(item) ')';
}

.button-active {
  font-weight: bold;
}

Key Takeaways for Escaping:

• Anything inside ~"..." is output directly into the CSS as is.
• It’s crucial for CSS hacks, proprietary syntax, or when you need to prevent LESS from interpreting a string.
• Variable interpolation (e.g., ~"@{variable}") can be used within escaped strings if you need to include dynamic values within the literal string.

Output

If you open the escaping.html file in a browser after compiling the LESS code:

• The paragraph with class special-text will attempt to use the CSS custom property --custom-highlight-color.
• The div with class legacy-filter will have the specified filter and content rules applied (behavior depends on browser support for these specific legacy or complex content properties).

Modern alternatives like CSS Custom Properties (Variables) have reduced the need for some escaping tricks, but escaping remains a valuable tool for specific edge cases.