Angular项目中SCSS循环使用transform属性报错求助

问题原因 #

你当前的代码使用了SCSS字符串插值#{}, 虽然生成的CSS语法上看似正确，但这种写法可能导致Angular的样式编译器或代码校验工具无法正确识别数值类型，从而抛出提示。静态值写法正常是因为直接传递了符合规范的长度/角度值。

解决方案 #

移除不必要的字符串插值，直接使用SCSS的变量运算能力——transform函数支持直接传入计算后的数值：

@for $i from -3 through 3 {
  &:nth-child(#{$i + 4}) {
    transform: translateY($i * -15%) rotate($i * 5deg);
  }
}

额外说明 #

1. 当$i=0时，生成的代码为transform: translateY(0%) rotate(0deg);，虽然语法合法，但部分校验工具会认为这是冗余代码。如果需要避免这类提示，可以单独处理该情况：

@for $i from -3 through 3 {
  &:nth-child(#{$i + 4}) {
    @if $i != 0 {
      transform: translateY($i * -15%) rotate($i * 5deg);
    }
    // $i=0时不设置transform，继承默认值即可
  }
}

2. 如果确认是校验工具误报，可以在对应行添加注释忽略校验（以stylelint为例）：

@for $i from -3 through 3 {
  &:nth-child(#{$i + 4}) {
    /* stylelint-disable-next-line */
    transform: translateY(#{$i * -15}%) rotate(#{$i * 5}deg);
  }
}

内容的提问来源于stack exchange，提问作者ArtO