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.
![](https://assets.edu.lat/sass/images/sass_control_directives_expressions/sass_control_directives_expressions_while.jpg)