What is the use of Escape in LESS?

In LESS, "escaping" allows us to use arbitrary strings as property or variable values. Sometimes, we may use special characters or symbols in LESS code, which may cause problems while compiling the code. Escaping is a technique that helps prevent such problems by encapsulating these special characters and symbols in special containers.

In this tutorial we will explore why escaping is necessary for LESS and how it works.

grammar

Users can use "escape" in LESS according to the following syntax.

@property_name: ~"anything";

In the above syntax, we use the tilde (~) before the string that needs to be escaped. The tilde (~) tells LESS to process the string as is, without making any changes to it except inserting any variables within the string.

Example 1: Escape special characters in CSS property values

In the example below, we use the ~ operator to escape single quotes in the URL in @my-bg.

In the output, the user can observe the correct URL in the compiled CSS. Quotes around the URL will cause compilation errors if not escaped.

@my-bg: ~"url('https://example.com/image.jpg')";
.background {
   background-image: @my-bg;
}

Output

.background {
   background-image: url('https://example.com/image.jpg');
}

Example 2: Using variables in media queries

In the example below, we define a variable @viewport-max-width with a value of 600px. We use escaping to ensure that the value of @viewport-max-width is passed to the CSS code as is, without LESS processing.

NOTE: Please note that as of LESS 3.5, escaping is not required in many cases where variables are used in media queries. In this case, we can simply reference the variable using @{} syntax.

In the output, the user can observe that the output of the two examples below is the same, which causes the media query to target the screen with a maximum width of 600 pixels.

@viewport-max-width: 600px;
@media screen and (max-width: ~"@{viewport-max-width}") {
   .my-class {
      font-size: 1.2rem;
   }
}
In LESS 3.5+, the above example can be written without the need for escaping as follows: 
@viewport-max-width: 600px; 
@media screen and (max-width: @{viewport-max-width}) { 
   .my-class { 
      font-size: 1.2rem; 
   } 
}

Output

@media screen and (max-width: 600px) {
   .my-class {
      font-size: 1.2rem;
   }
}

Example 3: Escape special characters in less variable values

In the following example, we use the tilde and double quote syntax ~"..." to define the variable @my-string as an arbitrary string. The string contains a pair of double quotes, which usually causes problems when LESS is compiled.

In the output, the user can observe that the value of @my-string is output as This is my "quoted" string without any problems due to escaping.

@my-string: ~"This is my "quoted" string";
.my-class {
   content: @my-string;
}

Output

.my-class {
   content: This is my "quoted" string;
}

Example 4: Using Less functions with escaped values

In the example below, we define a variable @my-color that has an arbitrary string value representing an RGBA color. The value is escaped using the tilde character followed by double quotes.

Then, we use the LESS function darken() to darken the color by 10% as the background color of the .my-class element. This function understands escaped string values ​​and applies calculations accordingly.

In the output, the user can observe that the original color (rgba(255, 0, 0, 0.5)) has been darkened by 10% to the new color (rgba(204, 0, 0, 0.5)) and applied as .my The background color of -class elements.

@my-color: ~"rgba(255, 0, 0, 0.5)";
.my-class {
   background-color: darken(@my-color, 10%);
}

Output

.my-class {
   background-color: rgba(204, 0, 0, 0.5);
}

Users learned to use escaping in LESS. Basically, escaping in LESS is an important technique that allows developers to write more efficient and maintainable CSS code.

Overall, by using escape syntax and functions, developers can ensure that special characters and reserved keywords are correctly encoded, thus preventing compilation errors and ensuring that the final output is correct.

The above is the detailed content of What is the use of Escape in LESS?. For more information, please follow other related articles on the PHP Chinese website!