Generated by SassMeister.com.

Pulsating background

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----

$pulse-bg-colors: ();

@mixin pulse-bg($color) {
  // Name the current animation for later use.
	$animation-id: 'pulse-bg_' + str-slice(inspect($color), 2);
  
  // If color hasn't already been created
  @if not index($pulse-bg-colors, $animation-id) {
    @at-root {
      %#{$animation-id} {
        animation: #{$animation-id} .5s infinite alternate;
        outline: none;
      }
      @keyframes #{$animation-id} {
        to { background: $color; }
      }
    }
    
    // Add color to index
    $pulse-bg-colors: append($pulse-bg-colors, #{$animation-id}) !global;
  }
  
  // Extend the global animation
  @extend %#{$animation-id};
}

.test1 { @include pulse-bg(#ff0000); }

.test2 { @include pulse-bg(#000); }

.test3 { @include pulse-bg(#000); }

.test4 { @include pulse-bg(#1a9bfc); }

SassMeister-output.css

.test1 {
  animation: pulse-bg_ff0000 0.5s infinite alternate;
  outline: none;
}

@keyframes pulse-bg_ff0000 {
  to {
    background: #ff0000;
  }
}
.test2, .test3 {
  animation: pulse-bg_000 0.5s infinite alternate;
  outline: none;
}

@keyframes pulse-bg_000 {
  to {
    background: #000;
  }
}
.test4 {
  animation: pulse-bg_1a9bfc 0.5s infinite alternate;
  outline: none;
}

@keyframes pulse-bg_1a9bfc {
  to {
    background: #1a9bfc;
  }
}