父母特异性的sass父母答案

【问题标题】：sass parent of parent specificity父母特异性的sass父母
【发布时间】：2015-02-13 11:50:37
【问题描述】：

我用 BEM 风格编写 CSS 并拥有以下代码：

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

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

【问题讨论】：

我不确定你为什么对.nav .nav__link--active 使用级联并将.nav__link 与.nav__link--active 结合使用。如果你放弃.nav 和.nav__link 都很好，特异性将为1，你应该按照正确的顺序对你的选择器进行排序。不要过度扩张 ;-)

标签： sass bem

【解决方案1】：

这没有什么神奇的方法。将所需的选择器存储为变量并像往常一样嵌套。

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

【讨论】：

给 SASS 用户的好建议！ ;-) 但请不要使用block__elem__elem。这种选择器是反模式的。