为什么在SASS中，#{$var}后的括号无法编译？

Question

我在SASS中有以下@mixin：

@mixin complexTransform($axis, $perspective, $degrees, $axis2, $px) {

    -webkit-transform: 
        perspective( $perspective )
        rotate#{ $axis }( $degrees )
        translate#{ $axis2 }( $px );

    -moz-transform: 
        perspective( $perspective )
        rotate#{ $axis }( $degrees )
        translate#{ $axis2 }( $px );

    -o-transform: 
        perspective( $perspective )
        rotate#{ $axis }( $degrees )
        translate#{ $axis2 }( $px );

    -ms-transform:
        perspective( $perspective )
        rotate#{ $axis }( $degrees )
        translate#{ $axis2 }( $px );

    transform:
        perspective( $perspective )
        rotate#{ $axis }( $degrees )
        translate#{ $axis2 }( $px );
}

除了rotate#{$axis}和translate#{$axis}后面的括号之外，所有内容都能成功编译。下面是编译后的CSS代码：

  -webkit-transform: perspective(600px) rotateX45deg translateY75px;
  -moz-transform: perspective(600px) rotateX45deg translateY75px;
  -o-transform: perspective(600px) rotateX45deg translateY75px;
  -ms-transform: perspective(600px) rotateX45deg translateY75px;
  transform: perspective(600px) rotateX45deg translateY75px;

我做错了什么？还是这种方法完全错误？

提前感谢您！

编辑：没关系！找到了解决办法……可能有点“hacky”，但至少有效。如果有人遇到同样的问题，我在这里发布它。

下面是改进后的工作混合：

@mixin complexTransform($axis, $perspective, $degrees, $axis2, $px) {

    -webkit-transform:
        perspective( $perspective + px )
        rotate#{$axis +"(" $degrees +deg +")" }
        translate#{ $axis2 +"(" + $px +px +")" };

    -moz-transform:
        perspective( $perspective + px )
        rotate#{$axis +"(" $degrees +deg +")" }
        translate#{ $axis2 +"(" + $px +px +")" };

    -o-transform:
        perspective( $perspective + px )
        rotate#{$axis +"(" $degrees +deg +")" }
        translate#{ $axis2 +"(" + $px +px +")" };

    -ms-transform:
        perspective( $perspective + px )
        rotate#{$axis +"(" $degrees +deg +")" }
        translate#{ $axis2 +"(" + $px +px +")" };

    transform:
        perspective( $perspective + px )
        rotate#{$axis +"(" $degrees +deg +")" }
        translate#{ $axis2 +"(" + $px +px +")" };
}

- Martin Velchevski

---

如果您正在回答自己的问题，请发布一个答案。编辑您的问题以包含答案只会使其看起来未被回答。 - cimmanon

谢谢@cimmanon！我试过了 - 我不能回答自己的问题，需要等待大约6个小时。我在这里还是新手 :) - Martin Velchevski

Answer 1

稍作修改后，我发现这个mixin更符合我的要求：

 @mixin keyframeBuilder($animationName, $f, $startParams, $stopParams) {
        @-webkit-keyframes $animationName {
            from { -webkit-transform: $f+'('#{$startParams}')' }
            to   { -webkit-transform: $f+'('#{$stopParams}')' }
        }
        @-moz-keyframes $animationName {
            from { -moz-transform: $f+'('#{$startParams}')' }
        to   { -moz-transform: $f+'('#{$stopParams}')' }
        }
        ... (other vendor prefixes)
    }

所以，当我调用时，实际上是这样的：

@include keyframeBuilder(spin, rotate, 0deg, 360deg);

它会生成：

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg); }

  to {
    -webkit-transform: rotate(360deg); } }

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg); }

  to {
    -moz-transform: rotate(360deg); } }

@-o-keyframes spin {
  from {
    -o-transform: rotate(0deg); }

  to {
    -o-transform: rotate(360deg); } }

@keyframes spin {
  from {
    transform: rotate(0deg); }

  to {
    transform: rotate(360deg); } }

我希望这也能帮助到某些人！:)

- dvdchr