LESS - Escaping



It builds selectors dynamically and uses property or variable value as arbitrary string.


The following example demonstrates the use of escaping in the LESS file −

      <title>Less Escaping</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <h1>Example using Escaping</h1>
      <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>

Now create the style.less file.


p {
   color: ~"green";

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command, it will create the style.css file automatically with the following code −


p {
   color: green;

Anything written inside ~"some_text" will be displayed as some_text after compiling the LESS code to CSS code.


Let us now perform the following steps to see how the above code works −

  • Save the above html code in the escaping.html file.

  • Open this HTML file in a browser, the following output will get displayed.

Less Escaping