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

【问题标题】：how let less produce BEM styled selectors in nested condition?如何让 less 在嵌套条件下生成 BEM 样式的选择器？
【发布时间】：2016-03-03 17:58:17
【问题描述】：

它非常适合遵循 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 中实现？谢谢~！

【问题讨论】：

标签： less bem

【解决方案1】：

使用Parent selectors

.block {
  color: red;

  &__element {
    color: blue;
  }

  &--modifier {
    color: orange;
  }
}

【讨论】：