sass parent of parent specificity

Question

我用BEM风格编写CSS，代码如下：

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

如何从上面的代码中获取.nav .nav__link--active和.nav__link.nav__link--active？我如何通过这种方法提高特异性？

Answer 1

没有什么神奇的方法可以做到这一点。将所需的选择器存储为变量，并像正常一样嵌套。

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