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変数を追加する可能性があります）。