Generated by SassMeister.com.

SassMeister-input-HTML.html

<header class="header header--mobile">
  <nav class="header-nav">
    <a href="#">hello</a>
  </nav>
</header>

<header class="header-block -mobile">
  <nav class="nav">
    <a href="#">hi</a>
  </nav>
</header>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

.header {
  // mobile modifier
  &--mobile {
    background: red;
  }

  // nav block
  &-nav {
    background: green;
    a { color: black };
  }
}

/// RSCSS
.header-block {
  // mobile variant
  &.-mobile {
    background: red;
  }
  
  > .nav {
    background: green;  
  }
  
  > .nav > a {
    color: black;
  }
}

SassMeister-output.css

.header--mobile {
  background: red;
}

.header-nav {
  background: green;
}

.header-nav a {
  color: black;
}

.header-block.-mobile {
  background: red;
}

.header-block > .nav {
  background: green;
}

.header-block > .nav > a {
  color: black;
}

SassMeister-rendered.html

<header class="header header--mobile">
  <nav class="header-nav">
    <a href="#">hello</a>
  </nav>
</header>

<header class="header-block -mobile">
  <nav class="nav">
    <a href="#">hi</a>
  </nav>
</header>