如何计算SASS中css伪类中的变量

Question

我对SASS还不熟悉。我想得到css，它使用for循环SASS计算CSS类中的值。在我的例子中，我想得到ul:nth-child(1) .而不是ul:nth-child(2) ..使用时会出错&ul:nth-child(#{$i} - 1)

$text-indent: 12px;
$width: 14px;

@for $i from 2 through 4 {
    &ul:nth-child(#{$i} - 1) {

      & .e-classA {
        text-indent: $text-indent * #{$i};

        &.e-classB {
          text-indent: ($text-indent * #{$i}) + $width;
        }
      }
    }
  }

实际产出：

Error: Invalid CSS after "...m 2 through 4 {": expected "}", was "nth-child(#{$i}..."
        on line 4 of stdin
>> @for $i from 2 through 4 {
   --------------------------^

预期产出：

ul:nth-child(1) .e-classA {
    text-indent: 24px;
}

ul:nth-child(1) .e-classA.e-classB {
    text-indent: 38px;
}

ul:nth-child(2) .e-classA {
    text-indent: 36px;
}

ul:nth-child(2) .e-classA.e-classB {
    text-indent: 50px;
}

ul:nth-child(3) .e-classA {
    text-indent: 48px;
}

ul:nth-child(3) .e-classA.e-classB {
    text-indent: 62px;
}

Answer 1

如果您想让SASS做一些计算，请将计算移到#{...}中。第二个问题可能是&在&ul:...的开头，您不需要它来获得结果。

我修正了你的密码：

$text-indent: 12px;
$width: 14px;

@for $i from 2 through 4 {
    ul:nth-child(#{$i - 1}) {

      & .e-classA {
        text-indent:  #{$text-indent * $i};

        &.e-classB {
          text-indent: #{($text-indent * $i) + $width};
        }
      }
    }
  }

在萨斯迈斯特进行了测试，效果很好。

Answer 2

通过以下修改解决了我的问题。

*&ul:nth-child(#{$i - 1}) *