title: how to select parent item with scss
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;ul id="navbar-main" class="navbar-nav mr-auto"&gt;
      &lt;li class="nav-item active"&gt;
          &lt;a href="https://travian.dev/materials" class="nav-link nav-materials"&gt;
              &lt;span class="invisible"&gt;Materials&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the following SCSS:</p>
  
  <pre><code>#navbar-main {
    li {
      &amp;.nav-item {
        .nav-link {
          width: 50px;
          height: 50px;
          background: no-repeat center;
          background-size: contain;
  
          &amp;.nav-materials {
            background-image: url('../images/buttons/menu-materials.png');
          }
        }
  
        &amp;.active {
          .nav-link {
            &amp;.nav-materials {
              background: red;
            }
          }
        }
      }
    }
  }
  </code></pre>
  
  <p>This is working, but I'd like it more maintainable/ easier to read. If possible, I'd like it to be like this:</p>
  
  <pre><code>#navbar-main {
    li {
      &amp;.nav-item {
        .nav-link {
          width: 50px;
          height: 50px;
          background: no-repeat center;
          background-size: contain;
  
          &amp;.nav-materials {
            background-image: url('../images/buttons/menu-materials.png');
  
            .active { // here something to actually select .nav-item.active .navlink.nav-materials
              background: red;
            }
          }
        }
      }
    }
  }
  </code></pre>