MENO - Mixins

I mixin sono simili alle funzioni nei linguaggi di programmazione. I mixin sono un gruppo di proprietà CSS che consentono di utilizzare le proprietà di una classe per un'altra classe e includono il nome della classe come proprietà. In LESS, puoi dichiarare un mixin allo stesso modo dello stile CSS usando il selettore di classe o id. Può memorizzare più valori e può essere riutilizzato nel codice ogni volta che è necessario.

La tabella seguente mostra in dettaglio l'uso di LESS mixin .

Sr.No. Uso e descrizione dei mixin
1 Non emettere il mixin

È possibile far scomparire i mixin nell'output semplicemente inserendo le parentesi dopo di essi.
2 Selettori in Mixins

I mixin possono contenere non solo proprietà, ma possono contenere anche selettori.
3 Spazi dei nomi

Gli spazi dei nomi vengono utilizzati per raggruppare i mixin sotto un nome comune.
4 Spazi dei nomi custoditi

Quando guard viene applicato allo spazio dei nomi, i mixin definiti da esso vengono utilizzati solo quando la condizione guard restituisce true.
5 La parola chiave! Important

La parola chiave ! Important viene utilizzata per sovrascrivere la particolare proprietà.

Esempio

L'esempio seguente mostra l'uso di mixin nel file 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>

Quindi, crea il file style.less .

style.less

.p1 {
   color:red;
}

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

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

Puoi compilare style.less in style.css usando il seguente comando:

lessc style.less style.css

Esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice:

style.css

.p1 {
   color: red;
}

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

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

Produzione

Segui questi passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra nel file less_mixins.html file.

  • Apri questo file HTML in un browser, verrà visualizzato il seguente output.

Le parentesi sono opzionali quando si chiamano mixin. Nell'esempio sopra, entrambe le dichiarazioni.p1(); e .p1; fai la stessa cosa.