how to select parent item with scss

Question

I have the following HTML:

<ul id="navbar-main" class="navbar-nav mr-auto">
    <li class="nav-item active">
        <a href="https://travian.dev/materials" class="nav-link nav-materials">
            <span class="invisible">Materials</span>
        </a>
    </li>
</ul>

And the following SCSS:

#navbar-main {
  li {
    &.nav-item {
      .nav-link {
        width: 50px;
        height: 50px;
        background: no-repeat center;
        background-size: contain;

        &.nav-materials {
          background-image: url('../images/buttons/menu-materials.png');
        }
      }

      &.active {
        .nav-link {
          &.nav-materials {
            background: red;
          }
        }
      }
    }
  }
}

This is working, but I'd like it more maintainable/ easier to read. If possible, I'd like it to be like this:

#navbar-main {
  li {
    &.nav-item {
      .nav-link {
        width: 50px;
        height: 50px;
        background: no-repeat center;
        background-size: contain;

        &.nav-materials {
          background-image: url('../images/buttons/menu-materials.png');

          .active { // here something to actually select .nav-item.active .navlink.nav-materials
            background: red;
          }
        }
      }
    }
  }
}

Answer 1

To be honest, I don't think you can really improve on the original SCSS you offered. The Sass parent selector (&) selects the entire chain of parents.

It's rather awkward, but you could use @at-root to return to the root of your style sheet, and then replace part of your selector, like so:

/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

#navbar-main {
  li {
    &.nav-item {
      .nav-link {
        width: 50px;
        height: 50px;
        background: no-repeat center;
        background-size: contain;

        &.nav-materials {
          background-image: url('../images/buttons/menu-materials.png');

          @at-root #{str-replace(#{&}, ".nav-item", ".nav-item.active")} {
            background: red;
          }
        }
      }
    }
  }
}

Answer 2

I didn't think it is possible to insert part of a selector in-between the parent selector in Scss in a maintainable way but maybe…

First, useful documentation: the Sass Ampersand (and the 3 articles at the end!) from CSS-Tricks references using a mixin after the well known cases where & can be used (and where it can't) and also #{&} when you want to use & twice (I didn't know about the latter and I tried+failed many times with && and li&, sigh).

This mixin as is wouldn't help in your case but here's my take:

Scss mixin that'll take 3 parameters to build one or another selector and any block of rule

➡️ Codepen

@mixin nav-bg($parent, $active, $sel) {
  @at-root #{$parent} {
    &#{$active $sel} {
      @content;
    }
  }
}


#navbar-main {
  li {
    &.nav-item {
      .nav-link {
        width: 50px;
        height: 50px;
        background: no-repeat center;
        background-size: contain;
      }

      @include nav-bg(&, '', '.nav-materials') {
        background-image: url('../images/buttons/menu-materials.png');
      }

      @include nav-bg(&, '.active', '.nav-materials') {
        background: red;
      }
    }
  }
}


// output
#navbar-main li.nav-item .nav-link {
  width: 50px;
  height: 50px;
  background: no-repeat center;
  background-size: contain;
}
#navbar-main li.nav-item .nav-materials {
  background-image: url("../images/buttons/menu-materials.png");
}
#navbar-main li.nav-item.active .nav-materials {
  background: red;
}

---

If your goal is to be as maintainable as possible, I'd advise you to completely change your way of nesting selectors and reduce their specificity.
Here's how I'd rewrite your block:

➡️ Less specificity (Codepen)

#navbar-main {
  .nav-link {
    width: 50px;
    height: 50px;
    background: no-repeat center;
    background-size: contain;
  }

  .nav-materials {
    background-image: url('../images/buttons/menu-materials.png');
  }

  .active {
    .nav-materials {
      background: red;
    }
  }
}

Sass references: [@content](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixin-content), [@at-root](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#at-root)

I'd also replace that id by a class, even for components that you know for sure will only exist once on a page. I resisted for a couple of years in that case and it's nearly as much a plague than i other cases…

Keep your CSS selectors short by CSSWizardry is a good start (scan his archives from 2012 to 2016 for way more) CSS methodologies that scale©: