MOINS - Gardes Mixin

La description

Si vous souhaitez faire correspondre des valeurs simples ou un nombre d'arguments sur des expressions, vous pouvez utiliser des gardes. Il est associé à la déclaration de mixin et inclut la condition qui est attachée à un mixin. Chaque mixin aura un ou plusieurs gardes qui sont séparés par des virgules; une garde doit être placée entre parenthèses. LESS utilise des mixins protégés au lieu deif/else instructions et effectue des calculs pour spécifier le mixin correspondant.

Le tableau suivant décrit les différents types de protections mixins avec une description.

N ° Sr.	Types et description
1	Opérateurs de comparaison de garde Vous pouvez utiliser l'opérateur de comparaison (=) pour comparer des nombres, des chaînes, des identifiants, etc.
2	Opérateurs logiques de garde Vous pouvez utiliser le mot - clé et pour contourner les opérateurs logiques avec des gardes.
3	Fonctions de vérification de type Il contient les fonctions intégrées pour déterminer les types de valeur pour les mixins correspondants.
4	Mixins conditionnels LESS utilise la fonction par défaut pour faire correspondre le mixin avec d'autres mixages.

Exemple

L'exemple suivant illustre l'utilisation de mixin gardes dans le fichier LESS -

<!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>

Maintenant, créez le fichier style.less .

sans style

.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)
}

Vous pouvez compiler le style.less en style.css en utilisant la commande suivante -

lessc style.less style.css

Exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

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

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

Production

Suivez ces étapes pour voir comment fonctionne le code ci-dessus -

Enregistrez le code html ci-dessus dans le mixin-guard.html fichier.
Ouvrez ce fichier HTML dans un navigateur, la sortie suivante s'affichera.