Generated by SassMeister.com.

SassMeister-input-HTML.haml

.block
  .block__element foo

.is--responsive
  .block
    .block__element bar

SassMeister-input.sass

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

=media($target)
  .is--responsive &
    @if $target == mobile
      @media screen and (max-width: 767px)
        @content
    @if $target == tablet
      @media screen and (min-width: 768px)
        @content

.block
  &__element
    color: red
    +media(mobile)
      color: green
    +media(tablet)
      color: blue

SassMeister-output.css

.block__element {
  color: red;
}
@media screen and (max-width: 767px) {
  .is--responsive .block__element {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .is--responsive .block__element {
    color: blue;
  }
}

SassMeister-rendered.html

<div class='block'>
  <div class='block__element'>foo</div>
</div>
<div class='is--responsive'>
  <div class='block'>
    <div class='block__element'>bar</div>
  </div>
</div>