父母特异性的 sass 父母 [英] sass parent of parent specificity

问题描述

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

I write CSS in BEM style and have this code:

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

如何从上面的代码中获取 .nav .nav__link--active 和 .nav__link.nav__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?

推荐答案

对此没有神奇的方法.将所需的选择器存储为变量并像往常一样嵌套.

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

这篇关于父母特异性的 sass 父母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！