MOINS - Mixins avec plusieurs paramètres

La description

Les paramètres peuvent être séparés par des virgules ou des points - virgules . En utilisant le symbole de la virgule, vous pouvez l'interpréter comme un séparateur de paramètres mixin ou un séparateur de liste css. Si vous utilisez un point-virgule dans mixin, il sépare les arguments par des points-virgules et les listes CSS auront toutes les virgules.

Il comprend quelques points sur les points-virgules et les virgules comme indiqué ci-dessous -

  • Si vous avez deux arguments, les arguments contiendront une liste séparée par des virgules. Par exemple,.class1(1, 2, 3; sometext, other thing).

  • S'il y a trois arguments, les arguments n'incluront que des nombres tels que .class1(1, 2, 3).

  • Vous pouvez utiliser un point-virgule factice avec une liste séparée par des virgules comme .class1(1, 2, 3;).

  • Il y a une valeur par défaut séparée par des virgules. Par exemple.class1(@color: gray, green;)

Syntaxe

.mixin_name(@var_name1; @var_name2:some) {
   //code here
}

Exemple

L'exemple suivant montre l'utilisation de mixin plusieurs paramètres dans le fichier LESS -

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

   <body>
      <h2>Example of Mixin Multiple Parameters</h2>
      <p class = "myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

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

.mixin(@color; @padding: 2) {
   color: @color;
   padding: @padding;
}

.myclass {
   .mixin(#FE9A2E);
}

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: #FE9A2E;
   padding: 2;
}

Production

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

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

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