Почему скобки не компилируются после # {$ var} в SASS?

Question

У меня есть следующее @mixin в SASS:

@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: Nevermind! Нашел решение ... он может быть немного «взломан», но, по крайней мере, он работает. Я размещаю его здесь, если кто-то еще сталкивается с той же проблемой.

Вот улучшилось, работая 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 +")" }; 
} 

Answer 1

С небольшими изменениями, я нахожу этот подмешать костюм мои требования лучше:

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

Я надеюсь, что это тоже поможет кому-то! :)