为啥在 SASS 中 #$var 之后括号不编译？

Posted 2023-03-17

【中文标题】为啥在 SASS 中 #$var 之后括号不编译？

【英文标题】：Why are parentheses not compiling after #$var in SASS?为什么在 SASS 中 #$var 之后括号不编译？

【发布时间】：2013-08-18 19:36:01

【问题描述】：

我在 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;

我做错了什么？或者这是一种完全错误的方法？

提前谢谢你！

EIDT：没关系！找到了一个解决方案......它可能有点“hacky”，但至少它有效。我在这里发布它以防其他人遇到同样的问题。

这是经过改进的、有效的 mixin：

@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 +")" ;

【问题讨论】：

如果您要回答自己的问题，请发布答案。编辑您的问题以包含答案只会使它看起来没有答案。

谢谢@cimmanon！试过这样做 - 不能回答我自己的问题大约 6 个小时。我是新来的 :)

【参考方案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);  

我希望这也能帮助别人！ :)