LESS - Paramètres nommés

La description

Les mixins fournissent des valeurs de paramètres au lieu de positions en utilisant leurs noms. Les paramètres n'ont aucun ordre pour placer les valeurs et ils peuvent être référencés par leur nom. Le résultat des paramètres nommés est plus facile à lire et fournit des codes clairs.

Exemple

L'exemple suivant illustre l'utilisation de paramètres nommés dans le fichier LESS -

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

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

Ensuite, créez le fichier style.less .

sans style

.mixin(@color: black; @fontSize: 10px) {
   color: @color;
   font-size: @fontSize;
}

.class1 {
   .mixin(@fontSize: 20px; @color: #F5A9D0);
}

.class2 {
   .mixin(#F79F81; @fontSize: 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

.class1 {
   color: #F5A9D0;
   font-size: 20px;
}

.class2 {
   color: #F79F81;
   font-size: 20px;
}

Production

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

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

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