Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="LayoutName__">
  <div class="_RegionName__">
    <div class="ComponentName" data-state="true">
      <div class="_SubComponent"></div>
    </div>
    <div class="ComponentName -variant_group--large">
      <div class="_SubComponent"></div>
    </div>
  </div>
</div>

SassMeister-input.sass

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

$variable-name--variant: 1px

div
  padding: 1em
  border: $variable-name--variant solid
.ComponentName
  background-color: rgba(orange, 0.1)
  border-color: rgba(orange, 0.3)
  ._SubComponent
    background-color: rgba(red, 0.1)
    border-color: rgba(red, 0.3)
  &.-variant_group--medium
    border-width: 2px
  &.-variant_group--large
    border-width: 3px

.LayoutName__
  background-color: rgba(blue, 0.1)
  border-color: rgba(purple, 0.3)
  ._RegionName__
    background-color: rgba(green, 0.1)
    border-color: rgba(green, 0.3)



// DSL-y, though the downside is the exact class then
// doesn't match between the markup, script, and Sass.

=layout($name)
  .#{ $name }__
    @content
=region($name)
  ._#{ $name }__
    @content
=component($name)
  .#{ $name }
    @content
=subcomponent($name)
  ._#{ $name }
    @content
=variant($name, $val: false)
  @if $val
    &.-#{ $name }--#{ $val }
      @content
  @else
    &.-#{ $name }
      @content
=state($state, $val: true)
  &[data-#{$state}="#{$val}"]
    @content



+layout(SomeLayout)
  color: black
  +variant(size, small)
    width: 20%
  +variant(size, large)
    width: 200%
  +region(ARegion)
    color: red
  +state(enabled)
    +region(ARegion)
      color: blue

+component(AComponent)
  color: orange
  +variant(featured)
    font-weight: bold
  +subcomponent(Part)
    color: white

SassMeister-output.css

div {
  padding: 1em;
  border: 1px solid;
}

.ComponentName {
  background-color: rgba(255, 165, 0, 0.1);
  border-color: rgba(255, 165, 0, 0.3);
}
.ComponentName ._SubComponent {
  background-color: rgba(255, 0, 0, 0.1);
  border-color: rgba(255, 0, 0, 0.3);
}
.ComponentName.-variant_group--medium {
  border-width: 2px;
}
.ComponentName.-variant_group--large {
  border-width: 3px;
}

.LayoutName__ {
  background-color: rgba(0, 0, 255, 0.1);
  border-color: rgba(128, 0, 128, 0.3);
}
.LayoutName__ ._RegionName__ {
  background-color: rgba(0, 128, 0, 0.1);
  border-color: rgba(0, 128, 0, 0.3);
}

.SomeLayout__ {
  color: black;
}
.SomeLayout__.-size--small {
  width: 20%;
}
.SomeLayout__.-size--large {
  width: 200%;
}
.SomeLayout__ ._ARegion__ {
  color: red;
}
.SomeLayout__[data-enabled="true"] ._ARegion__ {
  color: blue;
}

.AComponent {
  color: orange;
}
.AComponent.-featured {
  font-weight: bold;
}
.AComponent ._Part {
  color: white;
}

SassMeister-rendered.html

<div class="LayoutName__">
  <div class="_RegionName__">
    <div class="ComponentName" data-state="true">
      <div class="_SubComponent"></div>
    </div>
    <div class="ComponentName -variant_group--large">
      <div class="_SubComponent"></div>
    </div>
  </div>
</div>