MOINS - Correspondance de motifs

La description

Vous pouvez modifier le comportement de mixin en lui passant des paramètres.

Considérez un simple extrait de code LESS -

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

.line {
   .mixin(@color-new; #888);
}

Vous pouvez utiliser différentes valeurs pour @ color-new pour créer différents comportements de mixin, comme indiqué dans le code ci-dessous.

.mixin(dark; @color) {
   color: darken(@color, 15%);
}

.mixin(light; @color) {
   color: lighten(@color, 15%);
}

@color-new: dark;

.line {
   .mixin(@color-new; #FF0000);
}

Si vous définissez la valeur de @ color-new sur dark, alors il affichera le résultat dans une couleur plus foncée car la définition de mixin correspond au sombre comme premier argument.

Exemple

L'exemple suivant illustre l'utilisation de la correspondance de modèles dans le fichier LESS -

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

   <body>
      <h2>Example of Pattern Matching</h2>
      <p class = "myclass">Welcome to Tutorialspoint...</p>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.mixin(dark; @color) {
   color: darken(@color, 15%);
}

.mixin(light; @color) {
   color: lighten(@color, 15%);
}

@color-new: dark;

.myclass {
   .mixin(@color-new; #FF0000);
}

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: #b30000;
}

Production

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

  • Enregistrez le code html ci-dessus dans le pattern-matching.html fichier.

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