Question

我做了这个小小的发光动画：

@include keyframes(teal-glowing) {
    0% { background-color: $teal; -webkit-box-shadow: 0 0 3px $teal; }
    50% { background-color: rgba(3,173,172,0.83); -webkit-box-shadow: 0 0 7px rgba(3,173,172,0.83); }
    100% { background-color: $teal; -webkit-box-shadow: 0 0 3px $teal; }
}

我想知道是否可以做一个通用的，只是给它我作为参数的颜色。而不是创建teal-glowing，green-glowing，...

Answer 1

如果您可以在SASS的列表中定义颜色，则可以使用循环创建所有关键帧。

这个SASS：

$colors: teal, red;
@for $i from 1 through length($colors) {
  @keyframes(#{nth($colors, $i)}-glowing) {
    0% {background-color: nth($colors, $i);}
    50% {background-color: rgba(nth($colors, $i),0.83);}
    100% {background-color: nth($colors, $i);}
  }
}

将编译成这个CSS：

@keyframes (teal-glowing) {
  0% {background-color: teal;}
  50% {background-color: rgba(0, 128, 128, 0.83);}
  100% {background-color: teal;}
}
@keyframes (red-glowing) {
  0% {background-color: red;}
  50% {background-color: rgba(255, 0, 0, 0.83);}
  100% {background-color: red;}
}

然后只需添加任意数量的颜色到该列表。如果您想要的颜色不是HTML颜色，则必须调整此循环中关键帧的命名（可能添加另一个包含名称的SASS变量）。

SASS：为关键帧提供参数

1 个答案: