color.change($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$whiteness: null, $blackness: null,
$alpha: null)
change-color(...) //=> color@debug color.adjust(#6b717f, $red: 15); // #7a717f
@debug color.adjust(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
@debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)@mixin modifiers($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
@each $key, $value in $map {
&#{if($key != $base, #{$prefix}#{$key}, '')} {
@if type-of($value) == 'map' {
@include modifiers($value, $attribute, $separator);
}
@else {
#{$attribute}: $value;
}
}
}
}$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);
}
}
}