BEM with Sass, Stylus & co

This is one post I had in backup quite some time, I'll share it with you. It's basiclly only showing how BEM can be written with different preprocessors. My favourite is stylus.

stylus:

.block
    position: relative
    &__element
        position: relative
        &__icon
              position: absolute

    &__box
        position: relative

Less:

.block{
    position: relative;
    &__element{
        position: relative;
        &__icon{
              position: absolute;
        }
      }
    &__box{
        position: relative;
      }
}

Result:

.block {
  position: relative;
}
.block__element {
  position: relative;
}
.block__element__icon {
  position: absolute;
}
.block__box {
  position: relative;
}