Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>Resize this window to get eq.js working -- weird SassMeister bug.</div>
<div class="container container--large"  >
  <div class="component" data-eq-pts="small: 100, medium: 200" >
    <div class="component__title">Component Title</div>
    Component Body
  </div>
</div>
<div class="container container--small" >
  <div class="component" data-eq-pts="small: 100, medium: 200" >
    <div class="component__title">Component Title</div>
    Component Body
  </div>
</div>

<script src="https://raw.githubusercontent.com/Snugug/eq.js/1.x.x/dist/eq.min.js"></script>

SassMeister-input.scss

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----

.container {
  border: solid 1px pink;
  float: left;
  margin: 1em;
  padding: 1em;
}

.container--large {
  width: 250px;
}

.container--small {
  width: 150px;
}



@mixin eq($root-parent, $bp) {
  $eq-state: "#{$root-parent}[data-eq-state=" + $bp + ']';
  @at-root #{$eq-state} {
    @content;
  }
}

@mixin eq-child($root-parent, $bp) {
  $eq-state: "#{$root-parent}[data-eq-state=" + $bp + ']';
  @at-root #{$eq-state} & {
    @content;
  }
}

%my-component {
 $my-component: & !global;
 @include eq($my-component, small) {
    background: red;
 }
 @include eq($my-component, medium) {
   background: blue;
 }
}

%my-component__title {
 @include eq-child($my-component, small) {
   font-weight: bold;
 }
}

.component, .component {
  @extend %my-component;
}

.component__title {
  @extend %my-component__title;
}

SassMeister-output.css

.container {
  border: solid 1px pink;
  float: left;
  margin: 1em;
  padding: 1em;
}

.container--large {
  width: 250px;
}

.container--small {
  width: 150px;
}

[data-eq-state=small].component {
  background: red;
}
[data-eq-state=medium].component {
  background: blue;
}

[data-eq-state=small].component .component__title {
  font-weight: bold;
}

SassMeister-rendered.html

<div>Resize this window to get eq.js working -- weird SassMeister bug.</div>
<div class="container container--large"  >
  <div class="component" data-eq-pts="small: 100, medium: 200" >
    <div class="component__title">Component Title</div>
    Component Body
  </div>
</div>
<div class="container container--small" >
  <div class="component" data-eq-pts="small: 100, medium: 200" >
    <div class="component__title">Component Title</div>
    Component Body
  </div>
</div>

<script src="https://raw.githubusercontent.com/Snugug/eq.js/1.x.x/dist/eq.min.js"></script>