What is the use of Escaping in LESS?

In LESS, the "escaping" allows us to use any arbitrary string as a property or variable value. Sometimes, we may use special characters or symbols in our LESS code that can cause problems when the code is compiled. Escaping is a technique that helps prevent such issues by enclosing these special characters and symbols within a special container.

In this tutorial, we'll explore why escaping is necessary for LESS and how it works.

Syntax

Users can follow the syntax below to use “escaping” in LESS.

@property_name: ~"anything";

In the above syntax, we have used the tilde symbol (~) before the string that needs to be escaped. The tilde symbol (~) tells LESS to treat the string as is without making any changes to it, except for interpolating any variables inside the string.

Example 1: Escaping Special Characters in a CSS Property Value

In the example below, we have used the ~ operator to escape the single quotes within the URL in @my-bg.

In the output, users can observe the correct URL in the compiled CSS. Without escaping, the quotes around the URL would have caused a compilation error.

@my-bg: ~"url('https://example.com/image.jpg')";
.background {
   background-image: @my-bg;
}

Output

.background {
   background-image: url('https://example.com/image.jpg');
}

Example 2: Using Variables in Media Queries

In the example below, we have defined a variable @viewport-max-width with a value of 600px. we have used escaping to ensure that the value of @viewport-max-width is passed through to the CSS code as-is without being processed by LESS.

Note: Note that as of LESS 3.5, escaping is not needed in many cases where variables are used in media queries. In such cases, we can simply reference the variable using the @{} syntax.

In the output, users can observe that the output of both examples below are the same, which results in a media query that targets screens with a maximum width of 600px.

@viewport-max-width: 600px;
@media screen and (max-width: ~"@{viewport-max-width}") {
   .my-class {
      font-size: 1.2rem;
   }
}
In LESS 3.5+, the above example can be written without the need for escaping as follows: 
@viewport-max-width: 600px; 
@media screen and (max-width: @{viewport-max-width}) { 
   .my-class { 
      font-size: 1.2rem; 
   } 
}

Output

@media screen and (max-width: 600px) {
   .my-class {
      font-size: 1.2rem;
   }
}

Example 3: Escaping Special Characters in a Less Variable Value

In the example below, we have defined a variable @my-string as an arbitrary string using the tilde and double quotes syntax ~"...". The string contains a pair of double quotes, which would normally cause issues when compiled by LESS.

In the output, users can observe that the value of @my-string is outputted as This is my "quoted" string without any issues due to escaping.

@my-string: ~"This is my "quoted" string";
.my-class {
   content: @my-string;
}

Output

.my-class {
   content: This is my "quoted" string;
}

Example 4: Using Less Functions with Escaped Values

In the example below, we have defined a variable @my-color with an arbitrary string value that represents an RGBA color. The value is escaped using the tilde character followed by double quotes.

We then use a LESS function darken() to apply a 10% darker shade of the color as the background color for a .my-class element. The function is able to understand the escaped string value and apply the calculation accordingly.

In the output, users can observe that the original color (rgba(255, 0, 0, 0.5)) has been darkened by 10% to a new color (rgba(204, 0, 0, 0.5)) and applied as the background color for the .my-class element.

@my-color: ~"rgba(255, 0, 0, 0.5)";
.my-class {
   background-color: darken(@my-color, 10%);
}

Output

.my-class {
   background-color: rgba(204, 0, 0, 0.5);
}

Users learned to use Escaping in LESS. Basically, escaping in LESS is an important technique that allows developers to write more efficient and maintainable CSS code.

Overall, by using escaping syntax and functions, developers can ensure that special characters and reserved keywords are properly encoded, which prevents compilation errors and ensures that the final output is correct.