Почему моя функция цикла for не работает в sass?

Question

Я пытаюсь вызвать цикл @for в моем файле стиля, но он не работает.вот что я пробовал

@for $i from 1 to 50{
.point-#{i}{
  background-color: red;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -webkit-animation: movee 5s infinite;
  animation: movee 10s infinite;
  margin-left: #{i};
  margin-top: #{i} + 1;
}
  @keyframes movee {
    0% {
      margin-left: 0px;
    }
    50% {
      margin-left: 200px;
    }
    100% {
      margin-left: 0px;
    }
  }

}

и в моем классе очков ничего не отображается.

в HTML, который я написал с машинописью, подобной этой

  ngOnInit() {
    for (let i = 1; i <= 50; i++) {
      this.point += '<div class="point-' + i + '"></div>';
    }
  }

вот мой шаблон

<div class="move" [innerHtml]="point">
</div>

Answer 1

Я думаю, вам нужно использовать #{$i} вместо #{i} для средства доступа к имени класса в вашем коде sass и $i для значений. Вы можете увидеть некоторые примеры здесь: https://sass -lang.com / Документация / Интерполяция

Я также нашел хороший пример здесь: http://thesassway.com/intermediate/if-for-each-while