freeCodeCamp/guide/portuguese/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md

title	localeTitle
Use @for to Create a Sass Loop	Use @for para criar um loop Sass

Use @for para criar um loop Sass

1. A sintaxe básica do @for loop no SASS:

• For-through loop:

@for $i from <start number> through <end number> { 
  // some CSS 
 } 

• Para - para loop:

@for $i from <start number> to <end number> { 
  // some CSS 
 } 

Observe que a principal diferença é que "início ao fim" exclui o número final e "início até o fim" inclui o número final.

2. Por exemplo:

• For-through loop:

@for $i from 1 through 3 { 
  // some CSS 
 } 
 
 // 1 2 

• Para - para loop:

@for $i from 1 to 3 { 
  // some CSS 
 } 
 
 // 1 2 3 

3. Diretriz da diretriz SASS

O loop @for pode ser útil quando combinado com pseudo-classes CSS :nth-* . Exceto para esses cenários, prefira um loop @each se você tiver que iterar sobre algo.

@for $i from 1 through 10 { 
  .foo:nth-of-type(#{$i}) { 
    border-color: hsl($i * 36, 50%, 50%); 
  } 
 } 

Sempre use $i como um nome de variável para manter a convenção usual e, a menos que você tenha uma boa razão para, nunca use a palavra-chave: use sempre. Muitos desenvolvedores nem sabem que o Sass oferece essa variação; usá-lo pode levar a confusão.

Também não se esqueça de respeitar essas diretrizes para preservar a legibilidade:

• Sempre uma nova linha vazia antes de @for ;
• Sempre uma nova linha vazia após a chave de fechamento (}), a menos que a próxima linha seja uma chave de fechamento (}).