Using BEM in LESS like SASS using parents

Question

I am trying to refrence the base class to change a sub class based on a BEM modifier.

This works well in SASS, but I'm working with LESS now.

Heres the SASS refrence... https://css-tricks.com/the-sass-ampersand/

And heres the code that dosn't work...

.s-body {
  @self: &;
  ...
  &__door {
    ...
    &--state-past {
      #{@self}__image {
          ...
      }
    }
  }
  &__image {
    ...
  }
}

Answer 1

It isn't possible in LESS to assign the current class to a variable using an ampersand (&). But you can set the class name as a variable like this:

.s-body {
  @self: .s-body;
}

After that, you can use the variable as a selector like this: @{self}. For further explanation, check the LESS documentation: http://lesscss.org/features/#variables-feature-variable-interpolation

In your example, this will result in the following code:

.s-body {
  @self: .s-body;
  
  &__door {
    
    &--state-past {
      @{self}__image {
          
      }
    }
  }
  &__image {
    
  }
}