这是我想要制作的标准CSS,但想要使用SASS Mixin来完成这项工作。
标准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);}
}
我正在使用与以下帖子SASS keyframes not compiling as wanted相同的mixin,如下所示。
MIXIN
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
只要没有关键帧包含需要供应商前缀的属性,上面就可以了。与transform属性一样,所有供应商前缀关键帧都应用了(在本例中)-webkit-前缀。 例如:
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); } }
注意上面的-webkit-,带有-moz-keyframe。应该是-moz -
所以,我的第一个想法是将上面的mixin改为:
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};
}
}
调用mixin看起来像
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); }
如果只有一个关键帧“舞台”(参见原始代码 - 页面顶部,只有100%标记),这一切都可以正常工作,原因是我的术语在关键帧“舞台”方面略有偏离。< / p>
问题
我想要像上面这样的混合使用类似的东西。
@-webkit-keyframes crank-up {
20%,
40% { -webikit-transform: translateY(34px); }
80% { opacity: .8; }
100% { -webkit-transform: rotate(360deg);}
}
我也研究了两个Compass Animate插件; compass-animation和较新的compass-animate,但不确定这些是否有帮助。我需要一些方法来添加变量并使用mixin测试它,但不知道是否可以将变量传递给mixin。
任何帮助非常感谢。感谢
我一直在玩以下但是没有工作,只是想我会把它们加起来看看是否有人知道我哪里出错了。
实验混合:
@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};
}
}
答案 0 :(得分:10)
为了处理供应商前缀,我建议使用Autoprefixer而不是sass mixins。
Autoprefixer界面很简单:根据最新的W3C规范,忘记供应商前缀并编写普通CSS。您不需要特殊语言(如Sass)或特殊混音。
因为Autoprefixer是CSS的后处理器,所以您也可以将它与预处理器一起使用,例如Sass,Stylus或LESS。
所以,在你的情况下,你只需要写下这个:
@keyframes crank-up {
20%,
40% { -webkit-transform: translateY(34px); }
80% { opacity: .8; }
100% { -webkit-transform: rotate(360deg);}
}
autoprefixer会自动将其转换为:
@-webkit-keyframes crank-up {
20%, 40% {
-webkit-transform: translateY(34px);
}
80% {
opacity: .8;
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes crank-up {
20%, 40% {
-webkit-transform: translateY(34px);
}
80% {
opacity: .8;
}
100% {
-webkit-transform: rotate(360deg);
}
}
Autoprefixer得到广泛支持,您可以通过Compass,Grunt,Sublime Text,node.js,Ruby,Ruby on Rails,PHP ...来处理您的scss或css样式。
Here是关于项目的更多信息
答案 1 :(得分:10)
如果你已经在使用Compass并且不想加载额外库的全部反弹而只想写一些混音,那么THIS是最好的选择。
/* animation mixing
keyframe animation
@include animation('animation-name .4s 1')*/
@mixin animation($animate...) {
$max: length($animate);
$animations: '';
@for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
@if $i < $max {
$animations: #{$animations + ", "};
}
}
-webkit-animation: $animations;
-moz-animation: $animations;
-o-animation: $animations;
animation: $animations;
}
这里是关键帧Mixing在特定的浏览器商店前缀中包含CSS3属性,而不是@include翻译,我们使用完整的CSS(注意:如果您使用Sass 3.3或更早版本,那么你就是&#l; ll需要删除!global
标志):
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
$browser: '-webkit-' !global;
@content;
}
@-moz-keyframes #{$animationName} {
$browser: '-moz-' !global;
@content;
}
@-o-keyframes #{$animationName} {
$browser: '-o-' !global;
@content;
}
@keyframes #{$animationName} {
$browser: '' !global;
@content;
}
} $browser: null;
此处提供的是SASS示例:
@include keyframes(animation-name) {
0% {
#{$browser}transform: translate3d(100%, 0, 0);
}
100% {
#{$browser}transform: translate3d(0%, 0, 0);
}
}
这里是如何将动画包含在特定类或ID中的
.new-class {
@include animation('animation-name 5s linear');
}
这就是全部。