母亲特异性的父母

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