将变量从 SASS mixin 传递到 CSS Value

Question

我们如何将变量 $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 是一个变量？

Answer 1

这可能不是最佳解决方案。但它会解决你的问题。 试试下面的代码。

@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 );
}