Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="IssueContents">
    <div class="Theme">
        <h2 class="ThemeTitle">Theme Title</h2>
        <p class="ThemeContent">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story -featured">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story" data-loading="true">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
</div>

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

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

=extend($module_name, $variants...)
    @extend %#{$module_name}
    +extend-variants($module_name, $variants...)

=state($state, $val: true)
    &[data-#{$state}="#{$val}"]
        @content

=auto-extend($module_name, $variants...)
    .#{$module_name}
        +extend($module_name)
        @each $variant in $variants
            $sel: $variant
            @if type_of($sel) == "list"
                $sel: #{nth($sel, 1)}--#{nth($sel, 2)}
            &.-#{ $sel }
                +extend-variants($module_name, $variant)


// Placeholder-based reusable module.
// (Somewhat contrived, mixes structural and LAF.)
%Item
    width           : 200px
    border          : 1px solid #ccc
    display         : inline-block
    vertical-align  : top
    &%-size--small
        width: 100px
    &%-size--large
        width: 300px
    &%-align--left
        text-align: left
    &%-align--right
        text-align: right
    &%-red
        background: red

// Should not be extended outside of the module.
%_PrivateModule
    border: 1px solid rgba(0,0,255,0.2)

// Module component
%ItemComponent
    +extend(_PrivateModule)
    text-align  : center
    font-weight : 500
    &%-strong
        font-weight: 700


// Mixin-like class (contrived, these would be better as variants)
%FloatingItem
    background: rgba(255,0,0,0.1)
    &%-left
        float           : left
        margin-right    : 1rem
    &%-right
        float           : right
        margin-left     : 1rem
    

// Realized module implementations using more semantic classes.
.Story
    +extend(Item, size small, align right)
    &.-featured
        +extend-variants(Item, size large, align left)
    +state(loading)
        +extend-variants(Item, red)

.StoryTitle
    +extend(ItemComponent, strong)

.Theme
    +extend(Item, size large)
    +extend(FloatingItem, right)

.ThemeTitle
    +extend(ItemComponent)

// If necessary, the module can be directly used by
// generating actual class selectors for it. This is
// helpful in development.
+auto-extend(Item, size small, size large, align left, align right, red)

SassMeister-output.css

.Story, .Theme, .Item {
  width: 200px;
  border: 1px solid #cccccc;
  display: inline-block;
  vertical-align: top;
}
.Story, .Item.-size--small {
  width: 100px;
}
.Story.-featured, .Theme, .Item.-size--large {
  width: 300px;
}
.Story.-featured, .Item.-align--left {
  text-align: left;
}
.Story, .Item.-align--right {
  text-align: right;
}
.Story[data-loading="true"], .Item.-red {
  background: red;
}

.StoryTitle, .ThemeTitle {
  border: 1px solid rgba(0, 0, 255, 0.2);
}

.StoryTitle, .ThemeTitle {
  text-align: center;
  font-weight: 500;
}
.StoryTitle {
  font-weight: 700;
}

.Theme {
  background: rgba(255, 0, 0, 0.1);
}
.Theme {
  float: right;
  margin-left: 1rem;
}

SassMeister-rendered.html

<div class="IssueContents">
    <div class="Theme">
        <h2 class="ThemeTitle">Theme Title</h2>
        <p class="ThemeContent">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story -featured">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story" data-loading="true">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div class="Story">
        <h2 class="StoryTitle">Title</h2>
        <p class="StoryPreview">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
</div>