我们如何将变量 $name
的值传递给 CSS 值。
我们的 $name
变量 = "rotateX"
但是 transform: $name( 360deg );
似乎没有输出 transform: rotateX( 360deg );
即使我们使用插值:
这个 SCSS
@mixin rotate( $name ) {
animation-name: $name;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
@keyframes #{ $name } {
100% {
transform: #{ $name } ( 360deg );
}
}
}
.rotate-x {
@include rotate( $name: rotateX );
}
输出这个 CSS:
.rotate-x {
animation-name: rotateX;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite; }
@keyframes rotateX {
100% {
transform: rotateX 360deg; } }
出于某种原因,括号中的 360deg
值破坏了整个 CSS 规则。
transform: rotateX( 360deg )
其中 rotateX
是变量?答案 0 :(得分:3)
这可能不是最好的解决方案。但它会解决你的问题。 试试下面的代码。
@mixin rotate( $name ) {
animation-name: $name;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
@keyframes #{ $name } {
100% {
transform: #{ $name }#{"("}360deg#{")"};
}
}
}
.rotate-x {
@include rotate( $name: rotateX );
}