MOINS - Mixins

Les mixins sont similaires aux fonctions des langages de programmation. Les mixins sont un groupe de propriétés CSS qui vous permettent d'utiliser les propriétés d'une classe pour une autre classe et incluent le nom de la classe comme propriétés. Dans LESS, vous pouvez déclarer un mixin de la même manière que le style CSS en utilisant le sélecteur de classe ou d'id. Il peut stocker plusieurs valeurs et peut être réutilisé dans le code chaque fois que nécessaire.

Le tableau suivant montre en détail l'utilisation de LESS mixins .

N ° Sr. Utilisation et description des mixins
1 Ne pas sortir le mixin

Les mixins peuvent être amenés à disparaître dans la sortie en plaçant simplement les parenthèses après.
2 Sélecteurs dans Mixins

Les mixins peuvent contenir non seulement des propriétés, mais également des sélecteurs.
3 Espaces de noms

Les espaces de noms sont utilisés pour regrouper les mixins sous un nom commun.
4 Espaces de noms protégés

Lorsque la garde est appliquée à l'espace de noms, les mixins définis par celui-ci ne sont utilisés que lorsque la condition de garde renvoie true.
5 Le mot-clé! Important

Le mot-clé ! Important est utilisé pour remplacer la propriété particulière.

Exemple

L'exemple suivant montre l'utilisation de mixins dans le fichier LESS -

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

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

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

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

Production

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

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

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

Les parenthèses sont facultatives lors de l'appel de mixins. Dans l'exemple ci-dessus, les deux instructions.p1(); et .p1; faire la même chose.