scss color loop

89

@for $i from 1 through 6 {
    .grid-#{$i} {
        width: 100px*$i;
    }
}
$alarmRgb: 255, 213, 0;
$infoRgb: 25, 97, 166;
$warnRgb: 240, 111, 50;
$errorRgb: 228, 35, 38;
$successRgb: 0, 149, 52;

$pulseList:(
  alarm: $alarmRgb,
  info: $infoRgb,
  warn:  $warnRgb,
  error: $errorRgb,
  success: $successRgb
);

@each $key, $val in $pulseList {
  @keyframes pulse-#{$key}  {
    0% {
      box-shadow: 0 0 0 0 rgba(unquote(#{$val}), 0.7);
    }

    70% {
      box-shadow: 0 0 0 10px rgba(unquote(#{$val}), 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(unquote(#{$val}), 0);
    }
  }
}

Comments

Submit
0 Comments