Question

我是SASS的新手。我想获得使用for循环SASS评估CSS类中值的css。就我而言，我想获得ul：nth-child（ 1 ）.e-classA而不是ul：nth-child（ 2 ）.e-classA。使用＆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};
        }
      }
    }
  }

并且在sassmeister中进行了测试，并且可以正常工作。

如何在SASS中的CSS伪类中求值变量

1 个答案: