WENIGER - Mixin Guards

Beschreibung

Wenn Sie einfache Werte oder die Anzahl der Argumente für Ausdrücke abgleichen möchten, können Sie Wachen verwenden. Es ist mit der Mixin-Deklaration verbunden und enthält eine Bedingung, die an ein Mixin angehängt ist. Jedes Mixin hat einen oder mehrere Schutzvorrichtungen, die durch Komma getrennt sind. Ein Schutz muss in Klammern stehen. WENIGER verwendet stattdessen geschützte Mixinsif/else Anweisungen und führt Berechnungen durch, um ein übereinstimmendes Mixin anzugeben.

In der folgenden Tabelle werden die verschiedenen Arten von Mixins-Schutzvorrichtungen zusammen mit der Beschreibung beschrieben.

Sr.Nr.	Typen & Beschreibung
1	Schutzvergleichsoperatoren Mit dem Vergleichsoperator (=) können Sie Zahlen, Zeichenfolgen, Bezeichner usw. vergleichen.
2	Guard Logical Operators Mit dem Schlüsselwort und können Sie logische Operatoren mit Wachen umgehen.
3	Typprüffunktionen Es enthält die integrierten Funktionen zum Bestimmen der Werttypen für übereinstimmende Mixins.
4	Bedingte Mixins LESS verwendet die Standardfunktion , um das Mixin mit anderen Mixing-Matches abzugleichen.

Beispiel

Das folgende Beispiel zeigt die Verwendung von Mixin Guards in der LESS-Datei -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Erstellen Sie nun die Datei style.less .

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

Sie können style.less zu style.css kompilieren , indem Sie den folgenden Befehl verwenden:

lessc style.less style.css

Führen Sie den obigen Befehl aus. es wird die erstellen style.css Datei automatisch mit dem folgenden Code -

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Ausgabe

Befolgen Sie diese Schritte, um zu sehen, wie der obige Code funktioniert -

Speichern Sie den obigen HTML-Code in der mixin-guard.html Datei.
Öffnen Sie diese HTML-Datei in einem Browser. Die folgende Ausgabe wird angezeigt.