Generated by SassMeister.com.

element-query-mixins.css

.test-eq[data-eq-state="pane-sm"] {
  background: pink;
}

.test-container [data-eq-state="pane-sm"] {
  background: blue;
}

[data-eq-state="pane-sm"] .test-parent {
  background: green;
}

element-query-mixins.sass

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

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Breakpoint (v2.4.1)
@import "breakpoint"

// ********************************************************/
// The mixins below (and more) are in the TWC_Base theme:
// sites/all/themes/twc_base/sass/twc_base_partials/_base_breakpoints.sass 

// for when the data-eq is on the same container
@mixin eq($state)
  &[data-eq-state="#{$state}"]
    @content

// for when the data-eq is on a nested container
@mixin eq-container($state)
  [data-eq-state="#{$state}"]
    @content

// for when the data-eq is on a parent container
@mixin eq-parent($state)
  [data-eq-state="#{$state}"] &
    @content

@mixin pane-eq-sm-up
  [data-eq-state="pane-sm"],
  [data-eq-state="pane-md"],
  [data-eq-state="pane-lg"],
  [data-eq-state="pane-xl"]
    @content
// ===========================================


//Example Sass:

.test-eq
  +eq('pane-sm')
    background: red
    
.test-container
  +eq-container('pane-sm')
    background: blue

.test-parent
  +eq-parent('pane-sm')
    background: green
    
//==============================================

// Should you need styles to apply to a certain 
// pane width and larger, like 300px and up, tap
// into the extended mixins like this one:
.wx-module
  .foo
    width: 100%
    color: blue
  .bar
    width: 100%
    color: green
  @include pane-eq-sm-up
    .foo, .bar
      width: 50%

SassMeister-input-HTML.html

<h4>The actual element queries in this
demo won't work since we aren't loading
the eq.js here, but the HTML may help
you visualize which mixin is best suited
for each of these examples.</h4>

<div class="test-eq" data-eq-pts="pane: 1, pane-xs: 230, pane-sm: 300, pane-md: 465, pane-lg: 630px, pane-xl: 795">
  This div would be red.
</div>

<div class="test-container">
  <div class="panel-pane" data-eq-pts="pane: 1, pane-xs: 230, pane-sm: 300, pane-md: 465, pane-lg: 630px, pane-xl: 795">
    This div would be blue.
  </div>
</div>

<div class="panel-pane" data-eq-pts="pane: 1, pane-xs: 230, pane-sm: 300, pane-md: 465, pane-lg: 630px, pane-xl: 795">
  <div class="test-parent">
    This div would be green.
  </div>
</div>

SassMeister-output.css

.test-eq[data-eq-state="pane-sm"] {
  background: red;
}

.test-container [data-eq-state="pane-sm"] {
  background: blue;
}

[data-eq-state="pane-sm"] .test-parent {
  background: green;
}

.wx-module .foo {
  width: 100%;
  color: blue;
}
.wx-module .bar {
  width: 100%;
  color: green;
}
.wx-module [data-eq-state="pane-sm"] .foo, .wx-module [data-eq-state="pane-sm"] .bar,
.wx-module [data-eq-state="pane-md"] .foo,
.wx-module [data-eq-state="pane-md"] .bar,
.wx-module [data-eq-state="pane-lg"] .foo,
.wx-module [data-eq-state="pane-lg"] .bar,
.wx-module [data-eq-state="pane-xl"] .foo,
.wx-module [data-eq-state="pane-xl"] .bar {
  width: 50%;
}

SassMeister-rendered.html

<h4>The actual element queries in this
demo won't work since we aren't loading
the eq.js here, but the HTML may help
you visualize which mixin is best suited
for each of these examples.</h4>

<div class="test-eq" data-eq-pts="pane: 1, pane-xs: 230, pane-sm: 300, pane-md: 465, pane-lg: 630px, pane-xl: 795">
  This div would be red.
</div>

<div class="test-container">
  <div class="panel-pane" data-eq-pts="pane: 1, pane-xs: 230, pane-sm: 300, pane-md: 465, pane-lg: 630px, pane-xl: 795">
    This div would be blue.
  </div>
</div>

<div class="panel-pane" data-eq-pts="pane: 1, pane-xs: 230, pane-sm: 300, pane-md: 465, pane-lg: 630px, pane-xl: 795">
  <div class="test-parent">
    This div would be green.
  </div>
</div>