Was nützt Escape in LESS?

In LESS ermöglicht uns „Escape“ die Verwendung beliebiger Zeichenfolgen als Eigenschafts- oder Variablenwerte. Manchmal verwenden wir im LESS-Code Sonderzeichen oder Symbole, was beim Kompilieren des Codes zu Problemen führen kann. Escaping ist eine Technik, die dabei hilft, solche Probleme zu vermeiden, indem diese Sonderzeichen und Symbole in speziellen Containern gekapselt werden.

In diesem Tutorial werden wir untersuchen, warum Flucht für LESS notwendig ist und wie es funktioniert.

Grammatik

Benutzer können „escape“ in LESS gemäß der folgenden Syntax verwenden.

@property_name: ~"anything";

In der obigen Syntax haben wir die Tilde (~) vor der Zeichenfolge verwendet, die maskiert werden muss. Die Tilde (~) weist LESS an, die Zeichenfolge unverändert zu verarbeiten, ohne Änderungen daran vorzunehmen, außer dem Einfügen von Variablen in die Zeichenfolge.

Beispiel 1: Sonderzeichen in CSS-Eigenschaftswerten maskieren

Im folgenden Beispiel verwenden wir den ~-Operator, um einfache Anführungszeichen in der URL in @my-bg zu umgehen.

In der Ausgabe kann der Benutzer die korrekte URL im kompilierten CSS erkennen. Anführungszeichen um die URL führen zu Kompilierungsfehlern, wenn sie nicht maskiert werden.

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

Ausgabe

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

Beispiel 2: Verwendung von Variablen in Medienabfragen

Im folgenden Beispiel definieren wir eine Variable @viewport-max-width mit einem Wert von 600px. Wir verwenden Escape, um sicherzustellen, dass der Wert von @viewport-max-width unverändert und ohne WENIGER Verarbeitung an den CSS-Code übergeben wird.

Hinweis: Bitte beachten Sie, dass ab LESS 3.5 in vielen Fällen, in denen Variablen in Medienabfragen verwendet werden, kein Escapezeichen mehr erforderlich ist. In diesem Fall können wir einfach mit der @{}-Syntax auf die Variable verweisen.

In der Ausgabe kann der Benutzer beobachten, dass die Ausgabe der beiden folgenden Beispiele dieselbe ist, was dazu führt, dass die Medienabfrage auf den Bildschirm mit einer maximalen Breite von 600 Pixeln abzielt.

@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; 
   } 
}

Ausgabe

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

Beispiel 3: Sonderzeichen in weniger variablen Werten maskieren

Im folgenden Beispiel verwenden wir die Tilde- und Anführungszeichen-Syntax ~"...", um die Variable @my-string als beliebige Zeichenfolge zu definieren. Die Zeichenfolge enthält ein Paar doppelter Anführungszeichen, was normalerweise beim Kompilieren von LESS zu Problemen führt.

In der Ausgabe kann der Benutzer beobachten, dass der Wert von @my-string ohne Probleme aufgrund von Escapezeichen als „This is my „quoted“ string“ ausgegeben wird.

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

Ausgabe

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

Beispiel 4: Verwendung von Less-Funktionen mit maskierten Werten

Im folgenden Beispiel definieren wir eine Variable @my-color, die einen beliebigen Zeichenfolgenwert hat, der eine RGBA-Farbe darstellt. Der Wert wird mit dem Tilde-Zeichen gefolgt von doppelten Anführungszeichen maskiert.

Dann verwenden wir die LESS-Funktion darken(), um die Farbe als Hintergrundfarbe des .my-class-Elements um 10 % abzudunkeln. Diese Funktion versteht Escape-String-Werte und wendet Berechnungen entsprechend an.

In der Ausgabe kann der Benutzer beobachten, dass die ursprüngliche Farbe (rgba(255, 0, 0, 0,5)) um 10 % auf die neue Farbe (rgba(204, 0, 0, 0,5)) abgedunkelt und als angewendet wurde .my-class Die Hintergrundfarbe des Elements.

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

Ausgabe

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

Der Benutzer hat gelernt, Escape in LESS zu verwenden. Grundsätzlich ist das Escapen in LESS eine wichtige Technik, die es Entwicklern ermöglicht, effizienteren und wartbareren CSS-Code zu schreiben.

Insgesamt können Entwickler durch die Verwendung von Escape-Syntax und -Funktionen sicherstellen, dass Sonderzeichen und reservierte Schlüsselwörter korrekt codiert werden, wodurch Kompilierungsfehler verhindert und sichergestellt werden, dass die endgültige Ausgabe korrekt ist.

Das obige ist der detaillierte Inhalt vonWas nützt Escape in LESS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!