Here is the standard CSS I am trying to produce but want to use a SASS Mixin to do the work.
STANDARD CSS
@-webkit-keyframes crank-up {
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes crank-up {
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes crank-up {
100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
100% { transform: rotate(360deg);}
}
I'm using the same mixin as in the following post SASS keyframes not compiling as wanted which is shown below.
MIXIN
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
The above is OK, as long as none of the keyframes include a property that requires a vendor prefix. Like the transform property as all the vendor prefixed keyframes get applied with (in this case) the -webkit- prefix.
For example:
SCSS
@include keyframes(crank-up) {
100% { -webkit-transform: rotate(360deg);}
}
CSS
@-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@-ms-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
Notice the above, -webkit- with a -moz-keyframe. Should be -moz-
So, my first thought was to alter the above mixin to:
ALTERED MIXIN
@mixin keyframes($first-name, $last-name, $argument) {
@-webkit-keyframes #{$first-name} {
-webkit-#{$last-name}: #{$argument};
}
@-moz-keyframes #{$first-name} {
-moz-#{$last-name}: #{$argument};
}
@-o-keyframes #{$first-name} {
-o-#{$last-name}: #{$argument};
}
@keyframes #{$first-name} {
#{$last-name}: #{$argument};
}
}
With a call to the mixin looking like
SCSS
@include keyframes(crank-up, transform, rotate(360deg)) { }
CSS
@-webkit-keyframes crank-up { -webkit-transform: rotate(360deg); }
@-moz-keyframes crank-up { -moz-transform: rotate(360deg); }
@-o-keyframes crank-up { -o-transform: rotate(360deg); }
@keyframes crank-up { transform: rotate(360deg); }
This works all ok if there is only ONE Keyframe 'stage' (see in original code – top of page, there's only the 100% mark), excuse if my terminology is slightly off in reference to keyframe 'stage'.
PROBLEM
I want a mixin like the above to work with something like.
@-webkit-keyframes crank-up {
20%,
40% { -webikit-transform: translateY(34px); }
80% { opacity: .8; }
100% { -webkit-transform: rotate(360deg);}
}
I have also looked into the two Compass Animate plugins; compass-animation and the newer compass-animate but not really sure if these can help. I need some way of adding in a variable and testing for this with a mixin but don't know if it's possible to pass variable into mixins.
Any help much appreciated. Thanks
I've been playing around with the following but neither work, just thought I'd add them up to see if anyone knows where I'm going wrong.
EXPERIMENTAL MIXINS:
@mixin vendor-prefix($name, $argument, $webkit: "-webkit-", $moz: "-moz-",$o: "-o-", $stale: ""){
#{$webkit}: #{$name}: #{$argument};
#{$moz}: #{$name}: #{$argument};
#{$o}: #{$name}: #{$argument};
#{$stale}: #{$name}: #{$argument};
}
@mixin vendor-prefix($last-name, $argument){
@if $name == webkit {
-webkit-#{$name}: #{$argument};
} @else if $name == moz {
-moz-#{$name}: #{$argument};
} @else if $name == o {
-o-#{$name}: #{$argument};
} @else {
#{$name}: #{$argument};
}
}
Best Answer
To deal with vendor-prefixers I recommend to use Autoprefixer instead of sass mixins.
So, in your case, you just need to write this:
And autoprefixer converts it automatically to:
Autoprefixer is widely supported, you can process your scss or css styles with this tool through Compass, Grunt, Sublime Text, node.js, Ruby, Ruby on Rails, PHP...
Here is more info about the project