爲什麼在SASS中的＃{$ var}之後沒有編譯括號？

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

一切都很好的編譯，除了旋轉＃{$}軸和翻譯＃{$}軸後的括號內。這是編譯的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：沒關係！找到了一個解決方案...它可能有點'哈克'，但至少它可以工作。如果有人遇到同樣的問題，我會在此發佈。

這裏的改進，工作混入：

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

來源

2013-08-16 Martin Velchevski

如果你回答自己的問題，發表一個答案。編輯你的問題來包含答案只會使它看起來像沒有答案。 – cimmanon

謝謝@cimmanon！試過這樣做 - 不能回答我自己的問題，再加上6個小時的時間。我有點新:) –

而在稍加修改，我在我的要求，更好地發現這個混入套裝：

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

我希望這也能幫助別人！ :)

來源

2013-11-29 16:18:07 dvdchr

爲什麼在SASS中的＃{$ var}之後沒有編譯括號？

回答

相關問題