I encountered an error when working with my Angular project; I have a loop in scss:
我在使用角度项目时遇到错误;我在SCSS中有一个循环:
@for $i from -3 through 3 {
&:nth-child(#{$i + 4}) {
}
}
And when I try to rotate the boxes and translate them Y with $i variable code:
当我尝试旋转方框并用$i变量代码将它们平移为Y时:
@for $i from -3 through 3 {
&:nth-child(#{$i + 4}) {
transform: translateY(#{$i * -15}%) rotate(#{$i * 5}deg);
}
}
I get an error:
我收到一个错误:
A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG.
I tried to put a static value of a translate and rotate and everything was fine
我尝试设置平移和旋转的静态值,但一切正常
transform: translateY(-15%) rotate(5deg);
更多回答
优秀答案推荐
I don't get the same error as your when trying your code on SassMeister, but the problem seems to come from the %
unit. The problem is fixed when it's put inside the interpolation brackets:
在SassMeister上尝试您的代码时,我没有收到与您相同的错误,但问题似乎来自%单位。将其放入内插方括号中时,问题已修复:
translateY(#{$i * -15%})
You can also get the expected result by removing both unnecessary interpolations in the transform
functions:
您还可以通过删除变换函数中的两个不必要的内插来获得预期的结果:
@for $i from -3 through 3 {
&:nth-child(#{$i + 4}) {
transform: translateY($i * -15%) rotate($i * 5deg);
}
}
更多回答
我是一名优秀的程序员,十分优秀!