Sass Mixin用于包含多个阶段和变换属性的动画关键帧 [英] Sass Mixin for animation keyframe which includes multiple stages and transform property
问题描述
这里是我想要产生的标准CSS，但想要使用SASS Mixin来完成这项工作。
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）;}
}
关键帧起动{
100％{transform：rotate（360deg）;}
}
我正在使用与下面的帖子相同的mixin SASS关键帧不按需编译，如下所示。
MIXIN
@mixin关键帧（$ name）{
@ -webkit-keyframes＃{$ name} {
@content;
}
@ -moz-keyframes＃{$ name} {
@content;
}
@ -ms-keyframes＃{$ name} {
@content;
}
@keyframes＃{$ name} {
@content;
}
}
上面的是可以的，关键帧包括需要供应商前缀的属性。与transform属性一样，所有的供应商前缀关键帧都应用（在这种情况下）-webkit-前缀。
例如：
SCSS
（曲柄）{
100％{-webkit-transform：rotate（360deg）;}
}
CSS
@ - webkit-keyframes crank-up {100％{-webkit-transform：旋转（360度）; }}
@ -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-关键帧。应该是-moz -
所以，我的第一个想法是改变上面的mixin：
ALTERED MIXIN
@mixin关键帧（$ 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关键帧（起动，转换，旋转））{}
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）; }
如果只有一个关键帧'stage'
问题
的页面，只有100％的标记），如果我的术语稍微偏离了关键帧阶段
我想要一个像上面这样的mixin。
@ - webkit-keyframes crank -up {
20％，
40％{-webikit-transform：translateY（34px）; }
80％{opacity：.8; }
100％{-webkit-transform：rotate（360deg）;}
}
我也看过两个Compass Animate插件; 指南针动画和更新的指南针动画，但不是真的确定如果这些可以帮助。我需要一些方法添加一个变量和测试与一个mixin，但不知道是否可能传递变量mixins。
任何帮助非常感激。感谢
我一直在玩下面但是没有工作，只是想我会添加他们看看是否有人知道我在哪里错了。 / p>
实验性混合：
@mixin供应商前缀$ argument，$ webkit：-webkit-，$ moz：-moz - ，$ o：-o-，$ stale：）{
＃{$ webkit}：＃{$ name}：＃{$ argument};
＃{$ moz}：＃{$ name}：＃{$ argument};
＃{$ o}：＃{$ name}：＃{$ argument};
＃{$ stale}：＃{$ name}：＃{$ argument}
}
@mixin供应商前缀（$ 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};
}
}
处理供应商前缀我建议使用 Autoprefixer ，而不是sass mixins。
Autoprefixer接口很简单：根据最新的W3C规范，忘记供应商前缀并写入正常的CSS。
由于Autoprefixer是CSS的后处理器，因此您也可以使用预处理器，例如Sass ，Stylus或LESS。
所以，在你的情况下，你只需要这样写：
@keyframes crank-up {
20％，
40％{-webkit-transform：translateY（34px）; }
80％{opacity：.8; }
100％{-webkit-transform：rotate（360deg）;}
}
自动转码器会将其自动转换为：
@ - webkit-keyframes crank-up {
20％ 40％{
-webkit-transform：translateY（34px）;
}
80％{
opacity：.8;
}
100％{
-webkit-transform：rotate（360deg）;
}
}
@keyframes起动{
20％，40％{
-webkit-transform：translateY（34px）;
}
80％{
opacity：.8;
}
100％{
-webkit-transform：rotate（360deg）;
}
}
Autoprefixer广泛支持，您可以处理您的scss或css样式使用这个工具通过Compass，Grunt，Sublime Text，node.js，Ruby，Ruby on Rails，PHP ...
这里是关于项目的更多信息
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};
}
}
To deal with vendor-prefixers I recommend to use Autoprefixer instead of sass mixins.
Autoprefixer interface is simple: just forget about vendor prefixes and write normal CSS according to latest W3C specs. You don’t need a special language (like Sass) or special mixins.
Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors, such as Sass, Stylus or LESS.
So, in your case, you just need to write this:
@keyframes crank-up {
20%,
40% { -webkit-transform: translateY(34px); }
80% { opacity: .8; }
100% { -webkit-transform: rotate(360deg);}
}
And autoprefixer converts it automatically to:
@-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 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
这篇关于Sass Mixin用于包含多个阶段和变换属性的动画关键帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
