SCSS for循环生成

Question

我想用sass生成nthchild

并遇到问题

@for $i from 0 through 10 {
  div {
    content: $i + 1;
  }
}

它生成：1,2,3,4,5,6,7,8,9,10;

我需要这个结果：2,4,6,8,10

有什么想法吗？

Answer 1

您可以在@for。

中添加@if条件

以下是scss代码：

@for $i from 0 through 10 {
  @if $i % 2 == 0 and $i != 0 {
    div {
      content: $i;
    } 
  }
}

以上scss代码生成以下css代码：

div {
  content: 2;
}

div {
  content: 4;
}

div {
  content: 6;
}

div {
  content: 8;
}

div {
  content: 10;
}

Answer 2

试试这个

@for $i from 1 through 5 {
  div {
    content: $i * 2;
  }
}