Generated by SassMeister.com.

Element-Queries-Demo.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-Queries-Demo.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. You may copy 
this code into a module to test with eq.js</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>

<!---------------------->
<div class="sidebar">
  <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="rio minipanel">
      <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="wx-module">
          <span class="foo">Foo</span>
          <span class="bar">Bar</span>
        </div>
      </div>
    </div>
  </div>
</div>

Element-Queries-Demo.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

// ... one example of these types of mixins
@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

// ... one example of these types of mixins
@mixin pane-container-eq-md-up
  [data-eq-state="pane-md"],
  [data-eq-state="pane-lg"],
  [data-eq-state="pane-xl"]
    @content
    
// ... one example of these types of mixins
@mixin pane-parent-eq-xs-up
  [data-eq-state="pane-xs"] &,
  [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 these. Choose the
// appropriate mixin depending on where the EQ is.

/* This border style only applies when the parent container
/* outside the module is 230px or larger */
.wx-module
  .foo
    color: blue
  .bar
    color: green
  @include pane-parent-eq-xs-up
    .bar
      border: blue 1px solid
      
/* This border style only applies when a panel pane in 
/* the sidebar is 465px or larger width */      
.sidebar      
  @include pane-container-eq-md-up
    .foo
      border: red 1px solid      
      
/* This border style only applies when a panel pane 
/* nested directly beneath the sidebar is 300px or larger */ 
.sidebar+.panel-pane
  @include pane-eq-sm-up
    border: pink 1px solid