Sass - Directiva @ while

Descripción

Al igual que otras directivas de control, la directiva @ while también toma expresiones de SassScript y, hasta que la declaración se evalúa como falsa, genera estilos anidados de forma iterativa. La clave a tener en cuenta es que la variable de contador debe incrementarse / reducirse en cada iteración.

Sintaxis

while(condition) {
   // CSS codes
}

Ejemplo

El siguiente ejemplo demuestra el uso de la directiva @ 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>

A continuación, cree el archivo style.scss .

style.scss

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

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando el siguiente comando:

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

A continuación, ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

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; 
}

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente en el archivo @ while.html .
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page