Sass - @each Multiple Assignment with Maps

Descrizione

L'assegnazione multipla funziona bene con le mappe e sono considerate come elenchi di coppie. Se desideri utilizzare la mappa, devi modificare l' istruzione @each e utilizzare più assegnazioni.

Sintassi

@each $var1, $var2 in <map>

La sintassi è spiegata brevemente di seguito:

$var1, $var2 - Rappresenta il nome delle variabili.
<map> - Rappresenta elenchi di coppie.

Esempio

L'esempio seguente mostra l'uso di più assegnazioni con le mappe:

<html>
   <head>
      <title>Control Directives & Expressions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</p>
      <h2>Welcome to Tutorialspoint</p>
      <h3>Welcome to Tutorialspoint</p>
   </body>
</html>

Quindi, crea il file style.scss .

style.scss

@each $header, $color in (h1: red, h2: green, h3: blue) {
   #{$header} {
      color: $color;
   }
}

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Successivamente, esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice -

style.css

h1 {
   color: red;
}

h2 {
   color: green; 
}

h3 {
   color: blue; 
}

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

Salva il codice html sopra indicato nel file @ each_multiple_map.html .
Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

↰ Previous page