作者:西瓜246 | 来源:互联网 | 2023-01-06 15:16
我正在尝试从这个要旨中为CSS动画浏览器前缀使用这些SCSS mixins ,但是它正在输出$animation_name
应$animation_name
在CSS中输出实际值的文字。如何将实际值输入CSS输出?
SCSS:
@mixin animation ($delay, $duration, $animation) {
-webkit-animation-delay: $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: $animation;
-webkit-animation-fill-mode: forwards;
-moz-animation-delay: $delay;
-moz-animation-duration: $duration;
-moz-animation-name: $animation;
-moz-animation-fill-mode: forwards;
-o-animation-delay: $delay;
-o-animation-duration: $duration;
-o-animation-name: $animation;
-o-animation-fill-mode: forwards;
animation-delay: $delay;
animation-duration: $duration;
animation-name: $animation;
animation-fill-mode: forwards;
}
@mixin mykeyframe ($animation_name) {
@-webkit-keyframes $animation_name {
@content;
}
@-moz-keyframes $animation_name {
@content;
}
@-o-keyframes $animation_name {
@content;
}
@keyframes $animation_name {
@content;
}
}
.top{
position:relative;
top: 0%;
width: 100%;
text-align: center;
@include animation(0s,1s,inFromTop);
}
@include mykeyframe(inFromTop) {
from{
margin-top: -100%;
}
to{
margin-top: 0;
}
}
CSS输出(注意$animation_name
代码中的文字)
.top {
position: relative;
top: 0%;
width: 100%;
text-align: center;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 1s;
-webkit-animation-name: inFromTop;
-webkit-animation-fill-mode: forwards;
-moz-animation-delay: 0s;
-moz-animation-duration: 1s;
-moz-animation-name: inFromTop;
-moz-animation-fill-mode: forwards;
-o-animation-delay: 0s;
-o-animation-duration: 1s;
-o-animation-name: inFromTop;
-o-animation-fill-mode: forwards;
animation-delay: 0s;
animation-duration: 1s;
animation-name: inFromTop;
animation-fill-mode: forwards;
}
@-webkit-keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
@-moz-keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
@-o-keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
@keyframes $animation_name {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
这是Codepen中的HTML和SCSS
在Codepen调试模式下检查CSS 以查看其输出的CSS
1> 小智..:
Sass插值似乎可以解决问题:SassMeister演示
SCSS:
@mixin mykeyframe ($animation_name) {
@-webkit-keyframes #{$animation_name} {
@content;
}
@-moz-keyframes #{$animation_name} {
@content;
}
@-o-keyframes #{$animation_name} {
@content;
}
@keyframes #{$animation_name} {
@content;
}
}
CSS输出:
@-webkit-keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
@-moz-keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
@-o-keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}
@keyframes inFromTop {
from {
margin-top: -100%;
}
to {
margin-top: 0;
}
}