Как правильно оформить код при помощи LESS, БЭМ и &?

Question

[Дамир Саяхов]

Имеется следующий код в LESS

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

для квадратных кнопок модификатор размера должен срабатывать другим образом.
то есть на выходе в css должно быть что то вроде(если делать по БЭМ):

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

А получается

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

Я понимаю что пишу, то и получаю. Но как грамотно это описать не знаю.
Если буду писать

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

То это тоже не правильно. Если измениться название блока необходимо будет менять и модификатор.
Первый опыт использования БЭМ, так что могу в мелочах ошибаться. Спасибо.

Answer 1

[Дмитрий Андриянов]

Попробуйте так:

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

Результат

Только у вас немного странное название класса для модификатора. Обычно там есть имя модификатора (некоторого свойства блока) и его значение. Например, так:
sf-btn_square → sf-btn_type_square