Making the first child full width if odd number of children. (And trying new naming scheme.)

SassMeister-input-HTML.html

<div class="Issue">
    <div class="Issue_Cover" style="background-image: url(http://placepuppy.it/800/600/)"></div>
    <h1 class="Issue_Title">Issue #1</h1>
    <div class="Issue_Contents">
        <div class="Story -featured"></div>
        <div class="Story"></div>
        <div class="Story"></div>
        <div class="Story"></div>
        <div class="Story"></div>
        <div class="Story"></div>
        <div class="Story"></div>
    </div>
</div>

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

=extends($module_name, $variants...)
    @extend %#{ $module_name }
    @each $variant in $variants
        @if type_of($variant) == 'list'
            $variant: #{ nth($variant, 1) }--#{ nth($variant, 2) }
        @extend %#{ $module_name }%-#{ $variant }


// Based on Scott Kellum’s BEM helpers
// https://gist.github.com/scottkellum/6994632
=pcomponent($name)
    @at-root #{&}_#{$name}
        @content
=pvariant($name, $val: false)
    @if $val
        $val: --#{ $val }
    @else
        $val: ''
    @at-root #{&}%-#{$name}#{ $val }
        @content

=component($name)
    @at-root #{&}_#{$name}
        @content
=variant($name, $val: false)
    @if $val
        $val: --#{ $val }
    @else
        $val: ''
    @at-root #{&}.-#{$name}#{ $val }
        @content

// NOTE: Might these modifiers also be used to
// generate a manifest of the subcomponents and
// variants?


%Item
    display     : inline-block
    width       : 100%
    border      : 1px solid #ccc
    min-height  : 100px
    // Modifiers MUST start with a -, and a
    // class that starts with - MUST NOT be
    // at root level.
    +pvariant(size, small)
        width: 25%
    +pvariant(size, medium)
        width: 33.3333%
    +pvariant(size, large)
        width: 50%
    +pvariant(size, full)
        width: 100%

    +pcomponent(Cover)
        background-size     : cover
        background-position : center
        min-height          : 50px
        +pvariant(image_align, top)
            background-position: center top



// Semantic classes

.IssueContents
    font-size: 0
    *
        box-sizing: border-box

.Story
    +extends(Item, size small)
    .Issue_Contents &
        +extends(Item, size medium)
        +variant(featured)
            +extends(Item, size full)
    +component(Cover)
        +extends(Item_Cover)

.Issue
    +extends(Item)
    +component(Cover)
        +extends(Item_Cover, image_align top)

SassMeister-output.css

.Story, .Issue_Contents .Story, .Issue_Contents .Story.-featured, .Issue {
  display: inline-block;
  width: 100%;
  border: 1px solid #cccccc;
  min-height: 100px;
}
.Story {
  width: 25%;
}
.Issue_Contents .Story {
  width: 33.3333%;
}
.Issue_Contents .Story.-featured {
  width: 100%;
}
.Story_Cover, .Issue_Cover {
  background-size: cover;
  background-position: center;
  min-height: 50px;
}
.Issue_Cover {
  background-position: center top;
}

.IssueContents {
  font-size: 0;
}
.IssueContents * {
  box-sizing: border-box;
}

SassMeister-rendered.html

<div class="Issue">
    <div class="Issue_Cover" style="background-image: url(http://placepuppy.it/800/600/)"></div>
    <h1 class="Issue_Title">Issue #1</h1>
    <div class="Issue_Contents">
        <div class="Story -featured"></div>
        <div class="Story"></div>
        <div class="Story"></div>
        <div class="Story"></div>
        <div class="Story"></div>
        <div class="Story"></div>
        <div class="Story"></div>
    </div>
</div>