Less Language Escaping

Some browsers accept additional proprietary non-standard non-css syntax on top of the usual css. Less is build on top of standard css and therefore may not recognize it. You may also need to put an otherwise non-parseable value inside a variable and use it to dynamically build selector or other css part during compilation time.

Escaping allows you to use any arbitrary string as property value, variable value or as a selector. Use it to add browser specific features into less or to dynamically build selectors. Dynamic selector building is somewhat limited, but powerful enough to be useful occasionally.

First sub-chapter describes escaping inside property values and second sub-chapter is about selectors escaping. The last one lists all kinds of things that are tempting, but NOT supported.

Property Values

Use either ~"whatever" or ~'whatever' syntax to escape property values. Anything between quotes is placed into final css as is with almost no changes. The "as is" rule has one exception: string interpolation works with the usual @{variableName} syntax.

Sample input:

@variable: "dynamic";
h1 {
  margin: 1 ~"2 2" 3;
  padding: ~'ms:special.syntax()';
  text: ~'@{variable}';
}

compiles into:

h1 {
  margin: 1 2 2 3;
  padding: ms:special.syntax();
  text: dynamic;
}

Variables

You can use escaping to put value inside a variable. Use the same escaping syntax as for property values: @escapedVariable: ~".whatever";.

Selectors

WARNING: selectors escaping has been added into less.js-1.3.0 and deprecated soon after https://github.com/cloudhead/less.js/issues/36. The alternative syntax have not been ported yet. This chapter describes the old syntax which is currently implemented in less4j.

Use either (~"whatever") or (~'whatever') syntax to escape selectors. As it was with property values, anything between quotes is placed into final css as is with almost no changes. The "as is" rule has one exception: string interpolation works with the usual @{variableName} syntax.

Selector escaping has to be used for the whole selector. You can not escape only part of it. However, ruleset with multiple selectors can use both escaped and non-escaped selectors.

Sample input:

// escaped selector
(~"escaped-selector") {
  margin: 2 2 2 2;
}

// interpolation inside selector
@variable: "variable value";
(~'@{variable}') {
  padding: 2 2 2 2;
}

// multiple selectors
(~".escaped"), .normal, (~".another-escaped") {
  padding: 2 2 2 2;
}

compiles into:

escaped-selector {
  margin: 2 2 2 2;
}
variable value {
  padding: 2 2 2 2;
}
.escaped,
.normal,
.another-escaped {
  padding: 2 2 2 2;
}

What Is Not Supported

This part lists all kinds of things that NOT supported. Non of following snippets work.

Escaping does NOT allow operations:

.operation {
  margin: ~"2" + 2; // syntax error
}

Only property value can be escaped, nothing else:

#propertyName {
  ~"margin: 2 2 2 2"; // syntax error
  ~"margin": 2; // syntax error
}

Whole selector must be escaped:

(~"h1") h2 { // syntax error
  margin: 2;
}

You can NOT escape mixins names:

(~".mixin")() { // syntax error
  margin: 2;
}

Escaped rulesets can NOT be used as mixins:

(~".mixin") {
  margin: 2;
}
#nope {
  .mixin(); // syntax error
}