Search code examples
lessbem

how let less produce BEM styled selectors in nested condition?

It is great for the CSS styling following the BEM convention. Less is also great for us to do css development job. Normally, I'd like to use the LESS nest feature to organize my css. Following is the how SASS combine the both together via @at-root(BEM output in the nesting condition)

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

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

It will be compiled into :

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

How can we implement in LESS? Thanks~!

Solution

  • Using Parent selectors

    .block {
  color: red;

  &__element {
    color: blue;
  }

  &--modifier {
    color: orange;
  }
}