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)

%Module
    font-size: 14px
    color: blue
    &%-variant
        color: red
    &%-variant_group--one
        font-weight: 300
    &%-variant_group--two
        font-weight: 700

.Alpha
    +extend(Module)
    +extend-variants(Module, variant)
    font-size: 16px
    +state(progress, 50)
        background: red

.Beta
    +extend(Module, variant, variant_group one)
    +state(loading)
        opacity: 0.5

+auto-extend(Module, variant, variant_group one, variant_group two)

SassMeister-output.css

.Alpha, .Beta, .Module {
  font-size: 14px;
  color: blue;
}
.Alpha, .Beta, .Module.-variant {
  color: red;
}
.Beta, .Module.-variant_group--one {
  font-weight: 300;
}
.Module.-variant_group--two {
  font-weight: 700;
}

.Alpha {
  font-size: 16px;
}
.Alpha[data-progress="50"] {
  background: red;
}

.Beta[data-loading="true"] {
  opacity: 0.5;
}

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>