Why don't brackets compile after # {$ var} in SASS?

Question

I have the following @mixin in 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 ); } 

Everything compiles beautifully, except for parentheses after turning # {$ axis} and translating # {$ axis}. Here's what compiled CSS looks like:

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

What am I doing wrong? Or is this a completely wrong way to do this?

Thank you in advance!

EIDT: Nevermind! Found a solution ... it may be a little "hacked", but at least it works. I am posting it here if someone else is facing the same problem.

Here's an improved workflow:

 @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

With a little change, I find this mixin to better suit my requirements:

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

Therefore when i call

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

He produces:

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

Hope this helps someone too! :)