What is the use of Escape in LESS?

WBOY
Release: 2023-08-31 23:29:08
forward
1336 people have browsed it

LESS 中的 Escape 有什么用?

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";
Copy after login

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;
}
Copy after login

Output

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

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; 
   } 
}
Copy after login

Output

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

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;
}
Copy after login

Output

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

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%);
}
Copy after login

Output

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

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!

source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template