sass - 父母特异性的sass父母

Question

我以 BEM 样式编写 CSS 并拥有以下代码：

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

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

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;
      }
    }
  }
}