More Sexy Sass

FUGGINDOTS.scss

%dot {
  border: {
    radius: 100%;
  }
  background: $body-background-color;
}

@mixin make-dot($size) {
  height: $size;
  width:  $size;
}

$bar-types: "body", "liveliness";
$item-count: 5;

@each $bar-type in $bar-types {
  .#{$bar-type}-0 {
    display: none;
  }
  @for $count from 1 through $item-count {
    .coffee-#{$bar-type}-image-#{$count} {
      &:after {
        left: $count / $item-count * 100%;
      }
    }
  }
}

.coffee-bar {
  position: relative;
  &:after {
    content:" ";
    display: block;
    @include sprites-filter-bean;
    position: absolute;

    top: 50%;
    -webkit-transform: translateY(-50%);
  }
}

.container-dots {
  display:           -webkit-box;
  display:           -webkit-flex;
  -webkit {
    align-items:     center;
    justify-content: center;
    box-align:       center;
  }

  margin: 10px 0px;
  .item {
    -webkit: {
      flex: 1;
      box-flex: 1;
    }
  }
}

.small-dot {
  @extend %dot;
  @include make-dot(5px);
}

.large-dot {
  @extend %dot;
  @include make-dot(8px);
}