SASS - Usar @for para criar um laço em Sass

Conte-nos o que está acontecendo:
Eu sinceramente não sou muito bom em matemática, e eu já testei vários valores mas estou confuso com isso.

Seu código até o momento

<style type='text/scss'>
@for $j from 1 through 5 {
  .text-#{$j} { font-size: 15*#{$j}px; }
}
</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>



Informações de seu navegador:

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Desafio: SASS - Usar @for para criar um laço em Sass

Link para o desafio:

Olá, @DavdTheItGuy .

O que acontece no seu código está no cálculo usado no font-size. Ali você usa 15*#{$j}px.
O uso do #{} serve para transformar tudo dentro dele em código CSS. Portanto, todas as operações dinâmicas devem ser feitas dentro desse espaço. Ou, alternativamente, você pode simplesmente usar a variável “crua” no seu cálculo sem usar #{}.

Estas seriam as alternativas possíveis:

  1. Usando #{}:
font-size: #{$j * 15}px;
  1. Usando apenas a variável:
font-size: $j * 15px;

Você pode ler mais sobre a interpolação e sobre o uso do @for na documentação do sass:
1 → Sass: Interpolation
2 → Sass: @for (repare que o cálculo feito no exemplo usa apenas a variável)

Você também pode testar seus códigos no playground do sass: Sass: Playground.


Espero ter ajudado :smiley:

1 Like

Acho que entendi, mesmo assim obrigado!

1 Like