Question

我有一些看起来像这样的标记-

<div class="card">
   <div class="card__icon">Icon</div>
   <div class="card__text">Text</div>
</div>

我要像这样少点样式-

.card {
     &__icon {
        font-size: 1.75em;

         @media (min-width: 992px) {
              font-size: 2em;
          }
      }

       &__text {
          font-size: 1em;
       }
}

这很好用-但是父级正在其上切换类.current，而我试图使用相同的方法来更改一种儿童风格，但似乎无法使其正常工作。我正在尝试-

.card {
     &__icon {
        font-size: 1.75em;

         @media (min-width: 992px) {
              font-size: 2em;
          }
      }

       &__text {
          font-size: 1em;
       }

      &.current {
          // this is not working
          &__text {
              color: red;
          } 
     }
}

我可以将&__text内的&.current更改为.card__text，但效果很好-但是我想知道是否有一种方法可以将&__text语法保留在里面&.current并使用LESS。谢谢！

Answer 1

根据文档，parent selector &扩展到整个父嵌套规则，将每个嵌套规则父元素保持原样并将其插入`＆位置，因此在您的情况下

.card {
     &.current {
         &__text {
             color: red;
         } 
     }
}

编译为

.card.current__text {
    color: red;
}

这不是我们想要的，因为类current__text不存在。为避免这种情况，您可以按照以下较少的规则重新排列类选择器：

.card {
     .current & {
         &__text {
             color: red;
         } 
     }
}

编译为：

.current .card__text {
    color: red;
}

可以在此codepen

中找到一个工作示例

较少-使用BEM选择器和父类上的额外类来偏离

1 个答案: