micahgodbolt · October 31, 2014 18:32
diff --git a/SassMeister-input-HTML.html b/SassMeister-input-HTML.html
 <div data-eq-state="large">
  <ul>
    <li data-state="active">
      <a class="tab-link">Active Link</a>
    </li>
    <li data-state="inactive">
      <a class="tab-link">Inactive Link</a>
    </li>
  </ul>
 </div>
diff --git a/SassMeister-input.scss b/SassMeister-input.scss
 // ----
 // Sass (v3.4.6)
 // Compass (v1.0.1)
 // ----

 %tab-link-text {
  color: #aaa;
  [data-state="active"] > & {
    color: black;
  }
 }

 .tab-link {
  [data-eq-state="large"] & {
    @extend %tab-link-text;
  }
 }
diff --git a/SassMeister-output.css b/SassMeister-output.css
 [data-eq-state="large"] .tab-link {
  color: #aaa;
 }
 [data-eq-state="large"] [data-state="active"] > .tab-link {
  color: black;
 }
diff --git a/SassMeister-rendered.html b/SassMeister-rendered.html
 <div data-eq-state="large">
  <ul>
    <li data-state="active">
      <a class="tab-link">Active Link</a>
    </li>
    <li data-state="inactive">
      <a class="tab-link">Inactive Link</a>
    </li>
  </ul>
 </div>
	<div data-eq-state="large">
	<ul>
	<li data-state="active">
	<a class="tab-link">Active Link</a>
	</li>
	<li data-state="inactive">
	<a class="tab-link">Inactive Link</a>
	</li>
	</ul>
	</div>
	[data-eq-state="large"] .tab-link {
	color: #aaa;
	}
	[data-eq-state="large"] [data-state="active"] > .tab-link {
	color: black;
	}