less - 如何让 less 在嵌套条件下生成 BEM 样式的选择器？

Question

它非常适合遵循 BEM 约定的 CSS 样式。Less 也非常适合我们做 CSS 开发工作。通常，我想使用 LESS 嵌套功能来组织我的 CSS。以下是 SASS 如何通过@at-root（嵌套条件下的 BEM 输出）将两者结合在一起

.block {
    color: red;
    @at-root #{&}__element {
    color: blue;
}

    @at-root #{&}--modifier {
        color:orange;
    }
}

它将被编译成：

.block {
    color: red;}
.block__element {
    color: blue;
}
.block--modifier {
    color:orange;
}

我们如何在 LESS 中实现？谢谢~！

Answer 1

使用父选择器

.block {
  color: red;

  &__element {
    color: blue;
  }

  &--modifier {
    color: orange;
  }
}