Friday, March 3, 2017

LESS - Escaping

Description

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

Example

The below example demonstrates 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>
Next, create file style.less.

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
Next execute the above command, it will create style.css file automatically with the below 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's carry out the following steps to see how above code works:
  • Save the above html code in escaping.html file.
  • Open this HTML file in a browser, an output as below gets displayed.
Less Escaping

No comments:

Post a Comment