Sass - @ while Directive

Descrizione

Proprio come altre direttive di controllo, anche la direttiva @while accetta espressioni SassScript e finché l'istruzione non restituisce false, restituisce iterativamente stili nidificati. La cosa fondamentale da notare è che la variabile counter deve essere incrementata / decrementata ad ogni iterazione.

Sintassi

while(condition) {
   // CSS codes
}

Esempio

L'esempio seguente mostra l'uso della direttiva @ while -

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

   <body>
      <p class = "paddding-50">This is line one with left padding 50. </p>
      <p class = "paddding-40">This is line two with left padding 40.</p>
      <p class = "paddding-30">This is line three with left padding 30. </p>
      <p class = "paddding-20">This is line four with left padding 20. </p>
      <p class = "paddding-10">This is line five with left padding 10. </p>
   </body>
</html>

Quindi, crea il file style.scss .

style.scss

$i: 50;
@while $i > 0 {
   .paddding-#{$i} { padding-left: 1px * $i; }
   $i: $i - 10;
}

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

.paddding-50 {
   padding-left: 50px;
}

.paddding-40 {
   padding-left: 40px; 
}

.paddding-30 {
   padding-left: 30px; 
}

.paddding-20 {
   padding-left: 20px; 
}

.paddding-10 {
   padding-left: 10px; 
}

Produzione

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

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

↰ Previous page