What is the use of Escaping in LESS ?

In this article, we will know the concept of Escaping in LESS & how to implement & use it in the LESS code that will generate the corresponding CSS code. By using the CSS preprocessor languages i.e., LESS which helps to reduce the code complexity of writing the CSS. Escaping in LESS, helps us to use any arbitrary string as a CSS property or value. One may basically call it a variable but escaping is a lot different. Unlike variables, where we can just store value, in escaping, we could store a full property inside any string. 

Syntax:

@name : ~ “ .. ”

Example 1: This example uses the escaping feature to render CSS on the basis of screen width.

/*LESS Code file*/

@mediacondition : ~"min-width:600px";
.content{
   font-size: 1em;
   @media (@mediacondition){
      background-color: gold;
   }
}

Output: After code is compiled to native CSS, the following CSS file will be generated.

CSS

/* CSS code */
.content {
  font-size: 1em;
}
@media (min-width:600px) {
  .content {
    background-color: gold;
  }
}

Example 2: This example uses the escaping feature to render CSS on the basis of orientation.

/*LESS Code file*/

@res: ~'orientation : landscape';
.content{
    font-size: 1em;
   @media (@res) {
      background-color: gold;
   } 
    
}

Output: After compiling the above code, the following CSS code will be generated. 

CSS

/* CSS Code file */
.content {
  font-size: 1em;
}
@media (orientation : landscape) {
  .content {
    background-color: gold;
  }
}

Thus, escaping proves to be a very useful feature by which we can keep an entire property as a single object which can be used multiple times in the code to make it short and easy to understand.