Cacher is the code snippet organizer for pro developers

<ul class="triangle">
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>
 
 
 <p></p><div class="tri-right"></div>Some text</p>

@media (min-width: 960px) {
  ul.triangle {
    width: 30%;
  }
}
@media (min-width: 760px) {
  ul.triangle {
    width: 20%;
  }
}

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@mixin respond-to($media) {
  @if $media == desktop {
    @media (min-width: 960px) {
      @content;
    }
  }
  @else if $media == tablet {
    @media (min-width: 760px) {
      @content;
    }
  }
}

ul.triangle {
  @include respond-to('desktop'){
    width: 30%;
  }
  @include respond-to('tablet'){
    width: 20%;
  }
}

<ul class="triangle">
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>
 
 
 <p></p><div class="tri-right"></div>Some text</p>