LESS - Mixin & valeurs de retour

La description

Les mixins sont similaires aux fonctions et les variables définies dans un mixin se comportent comme ses valeurs de retour.

Exemple

L'exemple suivant montre l'utilisation de mixin et des valeurs de retour dans le fichier LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Mixins & return values</title>
   </head>

   <body>
      <div class = "myclass">
         <h2>Welcome to Tutorialspoint</h2>
         <p>LESS is a CSS pre-processor that enables customizable, 
         manageable and reusable style sheet for web site.</p>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.padding(@x, @y) {
   @padding: ((@x + @y) / 2);
}

.myclass{
   .padding(80px, 120px);  // call to the mixin
   padding-left: @padding; //  returns the value
}

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 {
   padding-left: 100px;
}

Production

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

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

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