Sass - @for par mot-clé

La description

La directive @for utilise le mot-cléthrough qui spécifie la plage comprenant les deux valeurs de <start> et <end>.

Syntaxe

@for $var from <start> through <end>

La syntaxe est brièvement expliquée ci-dessous -

$var - Il représente le nom de la variable comme $i.
<start> et <end>- Ce sont des expressions SassScript, qui renverront des entiers. Si <start> est supérieur à <end>, alors la variable de compteur est décrémentée et lorsque <start> est inférieur à <end>, la variable de compteur sera incrémentée.

Exemple

L'exemple suivant montre l'utilisation de la directive @for avec le mot clé through -

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

   <body>
      <p class = "p1">This is first line.</p>
      <p class = "p2">This is second line.</p>
      <p class = "p3">This is third line.</p>
      <p class = "p4">This is fourth line.</p>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

@for $i from 1 through 4 {
   .p#{$i} { padding-left : $i * 10px; }
}

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

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

Ensuite, exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

.p1 {
   padding-left: 10px;
}

.p2 {
   padding-left: 20px;
}

.p3 {
   padding-left: 30px; 
}

.p4 {
   padding-left: 40px; 
}

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans le fichier @ for_through.html .
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

↰ Previous page