LESS - Opérateurs de comparaison de garde

La description

LESS contient cinq opérateurs de comparaison de garde: <,>, <=,> = et =. Vous pouvez utiliser l'opérateur de comparaison (=) pour comparer des nombres, des chaînes, des identificateurs, etc., et les autres opérateurs ne peuvent être utilisés qu'avec des nombres.

Exemple

L'exemple suivant illustre l'utilisation d'opérateurs de comparaison de garde dans le fichier LESS -

<!doctype html>
   <head>
      <title>Guard Comparison Operators</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Guard Comparison Operators</h2>
      <p class = "myclass">Hello World!!!Welcome to Tutorialspoint...</p>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.mixin (@a) when (@a = 20px){
color:red;
}

.mixin (@a) when (@a < 20px) {
   color:blue;
}

.mixin (@a) {
   font-size: @a;
}

.myclass { .mixin(20px) }

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

.myclass {
   color: red;
   font-size: 20px;
}

Production

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

  • Enregistrez le code html ci-dessus dans le guard_comparison_operators.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, la sortie suivante s'affichera.