example of using bem constructor

gistfile1.txt

$placeholder: $black;
$aspect-ratio: ( '16to9': 9/16, '4to3': 3/4, '3to2': 2/3, '2to3': 3/2, '3to4': 4/3, '9to16': 16/9 );
@include object(figure) {
  @include element(container) {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    
    // picturefill positioning
    picture {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  @include element(placeholder) {
    position: relative;
    height: 0;
    width: 100%;
    background: $placeholder;
    
    // Query to generate all aspect ratio
    @each $aspect,
    $percent in $aspect-ratio {
      @include modifier(#{$aspect}) {
        padding-bottom: $percent*100%;
      }
    }
    
    // Same but at different media
    @include media("<=phone") {
      @each $aspect,
      $percent in $aspect-ratio {
        @include modifier(#{$aspect}-phone) {
          padding-bottom: $percent*100%;
        }
      }
    }
  }
}