Maintainable OOCSS with Sass/Compass and BEM syntax

_colors.scss

// Color names are not intended for direct use in your Sass files.
// Create a color map for each hue (e.g., neutrals, reds, yellows, greens and browns).
// http://www.color-blindness.com/color-name-hue/

$neutrals: (
        gray: #7f7f7f
);

$blues: (
     mariner: #4862a3,
  cornflower: #55acee
);

// Semantic color names are defined below. These are the colors you should
// be using directly in your Sass files.

$colors: (
                // Neutrals
          icon-bg: map-get($neutrals, gray),
     
                // Social
         facebook: map-get($blues, cornflower),
          twitter: map-get($blues, mariner),
            vimeo: map-get($blues, cornflower)
);

// Color modifiers are defined below. Similar to BEM naming conventions,
// colors should be named as <base-color>--<modifier>

$colors: map-merge($colors, (
    icon-bg--dark: darken(map-get($colors, icon-bg), 15%)
));

_config.scss

// Magic sprite selectors encourage deviations from BEM syntax
$disable-magic-sprite-selectors: true;

_helpers.scss

@import 'compass/css3/opacity';

// Helpers usually generate multiple lines of code. To prevent generating
// this code more than once, silent classes are defined below for extension
// with @extend %silent-class.

%opacity-100 {
  @include opacity(1);
}

%opacity-75 {
  @include opacity(.75);
}

icons.html

<div class="social-icons">
  <div class="icon icon--facebook">
    <div class="icon__foreground"></div>
  </div>
  <div class="icon icon--dark icon--twitter">
    <div class="icon__foreground"></div>
  </div>
  <div class="icon icon--vimeo">
    <div class="icon__foreground"></div>
  </div>
</div>

icons.scss

@import 'compass/utilities/sprites';

@import 'colors';
@import 'helpers';
@import 'mixins';


@mixin icon--social($map, $name) {
  &--#{$name} {
    background-color: map-get($colors, $name);
      
    .icon__foreground {
      @include sprite($map, $name, $dimensions: true);
    }
    
    &--large {
      .icon__foreground {
        @include sprite($map, #{$name}--large, $dimensions: true);
      }
    }
  }
}

.icon {
  
  $icons: sprite-map('icons/*.png');
  background: map-get($colors, icon-bg) $icons no-repeat;
  @include border-radius(3px);

  &__foreground {
    // for each icon: @include icon(name)
    @extend %opacity-75;
  }
  
  &--dark {
    background-color: map-get($colors, icon-bg--dark);
  }

  &:hover {
    .icon__foreground {
      @extend %opacity-100;
    }
  }
  
  @each $sprite in facebook, twitter, vimeo {
    @include icon--social($icons, $sprite);
  }
}