Less CSS - SPLessons
boy2 Chapter 14

Less Escaping

Less CSS - SPLessons

Less Escaping

shape Introduction

This chapter explains about the Less Escaping, its uses, and functions.


shape Description

An arbitrary string can be used as a property or a variable value using the function Escaping.

shape Example 1

Below example explains the simple snippet code.

.weird-element {
content: ~"^//* some horrible but needed css hack";
}

shape Result

.weird-element {
content: ^//* some horrible but needed css hack;
}

shape Example 2

Below example explains the use of Less Escaping.

shape Conceptual
figure

The below conceptual diagram represents the overall view about the example like creating .html and .less files in node js folder and compiling .less to .css.

shape Step 1

Create a simple HTML file in the Nodejs folder as shown below.

Less_Escaping.html

<html>
  <head>
   <title>Less Escaping</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Example for Less Escaping</h1>
<p>Escaping allows one to use any arbitrary string as property or variable value.</p>
</body>
</html>

shape Step 2

Create a Less file in the same Node js folder as shown below.

style.less

h1 {
color: rgb(75, 75, 200);
font-weight: 300;
}

p {
color: ~"red";
font-size: 20px;
}

body {
padding-top: 30px;
text-align: center;
background: rgb(244, 244, 244);
font-family: 'Lato';
}

shape Step 3

Compile the above less code in command prompt by using the following command.

lessc style.less style.css

shape Step 4

By compiling the above less code, it automatically generates the CSS code as shown below.

style.css

h1 {
color: #4b4bc8;
font-weight: 300;
}

p {
color: red;
font-size: 20px;
}

body {
padding-top: 30px;
text-align: center;
background: #f4f4f4;
font-family: 'Lato';
}

shape Result

After making all the required changes, run the html file in a browser to get the following output.

Summary

shape Key Points

  • Less escaping defines variable as property.


shape Programming
Tips

  • Make sure that both the HTML and LESS files are created in the same node js folder.
  • Check all the required changes in the coding before running the application.