LESS - Escaping

Description

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

Example

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

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

Now create the style.less file.

style.less

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 −

style.css

p {
   color: green;
}

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

Output

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
Advertisements