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

我认为您需要在Sass代码中使用#{$i}代替#{i}作为类名访问器，而对于值使用$i。您可以在此处看到一些示例：https://sass-lang.com/documentation/interpolation

我在这里也找到了一个很好的例子： http://thesassway.com/intermediate/if-for-each-while

为什么我的“ for”循环功能在sass中不起作用？

1 个答案: