LESS - Escaping

Advertisements

Previous Page
Next Page  

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