How to code properly with LESS, BEM and &?

Question

Less

I have the following code in LESS

.sf-btn {
  &_size_s{
    .btn-size(.75)
  }
  &_square{
    .btn-square(1);
    &_size_s{
      .btn-square(.75)
    }
  }
}

for square buttons, the size modifier should work differently.
that is, the output in css should be something like (if done according to BEM):

.sf-btn_size_s{}
.sf-btn_square.sf-btn_size_s{}

And it turns out

.sf-btn_size_s{}
.sf-btn_square_size_s{}

I understand what I write, that's what I get. But I don't know how to properly describe it.
If I write

.sf-btn {
  &_size_s{
    .btn-size(.75)
  }
  &_square{
    .btn-square(1);
    &.sf-btn_size_s{
      .btn-square(.75)
    }
  }
}

That is also not correct. If the name of the block changes, the modifier will also need to be changed.
This is my first time using BEM, so I might be wrong on the little things. Thank you.

Answer 1

Try like this:

.sf-btn {
  &_size_s{
    width: 100px;
  }
  &_square{
    border-radius: 0;
  }
  
  &_square&_size_s{
    width: 110px;
  }
}

Result
Only you have a slightly strange class name for the modifier. Usually there is the name of the modifier (some property of the block) and its value. For example, like this:
sf-btn_square→sf-btn_type_square