LESS - Escaping


Advertisements

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

Useful Video Courses


Video

LESS Online Training

20 Lectures 1 hours

Anadi Sharma

Video

Serverless Development with AWS Lambda and NodeJS

44 Lectures 7.5 hours

Eduonix Learning Solutions

Video

Delegation Mastery: Learn to Outsource Your Work and Do Less

17 Lectures 2 hours

Zach Miller

Video

Create a WordPress Website in 24 Hours or Less Guaranteed

23 Lectures 1.5 hours

Zach Miller

Video

Become PHP Facebook Developer: Password-Less Authentication

34 Lectures 4 hours

Syed Raza

Video

AWS LAMBDA- Serverless Computing

31 Lectures 3 hours

Harshit Srivastava

Advertisements