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 nicely, except the parentheses after rotate#{$axis} and translate#{$axis}. This is what the 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 is it that I am doing wrong? Or is this a completely wrong way to go about doing this?
Thank you in advance!
EIDT: Nevermind! Found a solution... it might be a bit 'hacky' but at least it works. I am posting it here in case anyone else encounters the same issue.
Here's the improved, working 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 +")" };
}
With a little modification, I find this mixin suit my requirements better:
@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)
}
So essentially when I call
@include keyframeBuilder(spin, rotate, 0deg, 360deg);
It 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); } }
I hope this will also help someone! :)