sass parent of parent specificity

Question

I write CSS in BEM style and have this code:

.nav {
    &__list {
      &__item {
      }    
    }
  &__link {
    &--active { 
    }
  }
}

How do I get .nav .nav__link--active and .nav__link.nav__link--active from code above? How can I enhance the specificity by this method?

Answer 1

There is no magic method for this. Store the desired selector as a variable and nest like normal.

.nav {
  $sel: &;
    &__list {
      &__item {
        color: red;
        #{$sel} & {
          border: 1px solid;
        }
      }    
    }
  &__link {
    &--active {
      color: blue;
      #{$sel} & {
        border: 1px dashed;
      }
    }
  }
}