SASS:为关键帧提供参数

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变量).