Sass + Compass Facebook spinner

facebook-spinner.css

.facebook-spinner {
  @include facebook-spinner;
}

facebook-spinner.scss

@include keyframes(facebookSpinner) {
  0%   { @include scale(1); @include opacity(1); }
  100% { @include scale(.7); @include opacity(.1); }
}

@mixin facebook-spinner($total: 3) {
  $block-width: 7px;
  $block-height: 28px;
  $block-margin: 2px;
  width: ($block-width * $total) + ($block-margin * ($total - 1));
  height: $block-height;

  .spinner-block {
    float: left;
    width: $block-width;
    height: $block-height;
    background-color: #8b9dc3;
    border: 1px solid #3b5998;
    @include box-sizing(border-box);
    @include animation-name(facebookSpinner);
    @include animation-duration(1s);
    @include animation-iteration-count(infinite);

    &:not(:last-child) {
      margin-right: $block-margin;
    }
  }

  @for $i from 1 through $total {
    $delay: #{$i * 100}ms;
    .block-#{$i} { @include animation-delay($delay); }
  }
}

http://codepen.io/jabes/pen/JdjXxM