A quoi sert Escape dans LESS ?

Dans LESS, "échapper" nous permet d'utiliser des chaînes arbitraires comme valeurs de propriété ou de variable. Parfois, nous pouvons utiliser des caractères spéciaux ou des symboles dans le code LESS, ce qui peut causer des problèmes lors de la compilation du code. L'échappement est une technique qui permet d'éviter de tels problèmes en encapsulant ces caractères et symboles spéciaux dans des conteneurs spéciaux.

Dans ce tutoriel, nous explorerons pourquoi s'échapper est nécessaire pour LESS et comment cela fonctionne.

Grammaire

Les utilisateurs peuvent utiliser "escape" dans LESS selon la syntaxe suivante.

@property_name: ~"anything";

Dans la syntaxe ci-dessus, nous avons utilisé le tilde (~) avant la chaîne qui doit être échappée. Le tilde (~) indique à LESS de traiter la chaîne telle quelle, sans y apporter aucune modification, sauf en insérant des variables dans la chaîne.

Exemple 1 : Échapper aux caractères spéciaux dans les valeurs des propriétés CSS

Dans l'exemple ci-dessous, nous utilisons l'opérateur ~ pour échapper aux guillemets simples dans l'URL dans @my-bg.

Dans la sortie, l'utilisateur peut observer l'URL correcte dans le CSS compilé. Les guillemets autour de l'URL provoqueront des erreurs de compilation s'ils ne sont pas échappés.

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

Sortie

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

Exemple 2 : Utilisation de variables dans les requêtes multimédias

Dans l'exemple ci-dessous, nous définissons une variable @viewport-max-width avec une valeur de 600px. Nous utilisons l'échappement pour garantir que la valeur de @viewport-max-width est transmise au code CSS telle quelle, sans MOINS de traitement.

Remarque : veuillez noter qu'à partir de LESS 3.5, l'échappement n'est pas requis dans de nombreux cas où des variables sont utilisées dans les requêtes multimédias. Dans ce cas, nous pouvons simplement référencer la variable en utilisant la syntaxe @{}.

Dans la sortie, l'utilisateur peut observer que la sortie des deux exemples ci-dessous est la même, ce qui amène la requête multimédia à cibler l'écran avec une largeur maximale de 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; 
   } 
}

Sortie

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

Exemple 3 : Échapper aux caractères spéciaux dans moins de valeurs variables

Dans l'exemple ci-dessous, nous utilisons la syntaxe tilde et guillemets ~"..." pour définir la variable @my-string comme une chaîne arbitraire. La chaîne contient une paire de guillemets doubles, ce qui pose généralement des problèmes lors de la compilation de LESS.

Dans la sortie, l'utilisateur peut observer que la valeur de @my-string est affichée sous la forme Ceci est ma chaîne "citée" sans aucun problème dû à l'échappement.

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

Sortie

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

Exemple 4 : Utilisation des fonctions Less avec des valeurs échappées

Dans l'exemple ci-dessous, nous définissons une variable @my-color qui a une valeur de chaîne arbitraire représentant une couleur RGBA. La valeur est échappée à l'aide du caractère tilde suivi de guillemets doubles.

Ensuite, nous utilisons la fonction LESS darken() pour assombrir la couleur de 10 % comme couleur d'arrière-plan de l'élément .my-class. Cette fonction comprend les valeurs de chaîne échappées et applique les calculs en conséquence.

Dans la sortie, l'utilisateur peut observer que la couleur d'origine (rgba(255, 0, 0, 0.5)) a été assombrie de 10 % par rapport à la nouvelle couleur (rgba(204, 0, 0, 0.5)) et appliquée comme .my-class La couleur d'arrière-plan de l'élément.

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

Sortie

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

L'utilisateur a appris à utiliser l'évasion en MOINS. Fondamentalement, l'évasion dans LESS est une technique importante qui permet aux développeurs d'écrire du code CSS plus efficace et plus maintenable.

Dans l'ensemble, en utilisant la syntaxe et les fonctions d'échappement, les développeurs peuvent garantir que les caractères spéciaux et les mots-clés réservés sont correctement codés, évitant ainsi les erreurs de compilation et garantissant que le résultat final est correct.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!