Первичный родитель через амперсанд (SASS). Как?

Question

[Владислав Валабуев]

Доброго времени!

Учусь правильно использовать БЭМ в своих проектах.

Есть кнопка с иконкой и текстом.
Хочу сделать отступ слева у текста, если есть иконка, т.е. примерно .btn__ico + .btn__text:

// example 1
.btn
	&__ico
		position: absolute
	&__ico + &__text
		margin-left: 29px

// example 2
.btn
	&__ico
		position: absolute
		+ .btn__text
			margin-left: 29px

Какой из этих способов правильный?
И есть ли третий?

Пытался еще вот так:

.btn
	&__ico
		position: absolute
		& + &__text
			margin-left: 29px

Но это не работает, как хотелось бы.
Желательно с аргументами, чтобы я понял, почему именно так.

Answer 1

[Realetive]

Попробуйте pobem. Он позволяет прозрачно работать в контексте методологии и правильно воспринимает вложенность:

block(select) {
  max-width: 100%;
  vertical-align: bottom;

  .elem(button) {
    width: 100%;
    vertical-align: top;
    text-align: left;
  }

  block(button).elem(text) {
    display: block;
    padding-right: 2em;

    &:empty:before {
      content: '\00a0'
    }
  }

  .elem(tick) {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-image: url('../icon/_symbol/icon_symbol_chevron-down.svg');
    transition: transform 0.1s ease-out;
    width: 2em;
    padding: .5em;

    &:empty:after {
      content: none
    }
  }

  .mod(opened) .elem(tick) {
    transform: rotate(-180deg)
  }

  .mod(width available) {
    width: 100%
  }

  .mod(has-error) {
    block(button) {
      border-color: red
    }

    .elem(tick) {
      display: none;
    }
  }
}

Comments

[Владислав Валабуев]

Интересно, спасибо!

Answer 2

[Алексей Скляров]

Лично я использую всегда второй вариант.

Ваша попытка не работает потому что & ссылается на родителя, то бишь при попытке писать &__text в блоке с &__ico, вы пишете примерно такое: &__ico__text.

Comments

[Владислав Валабуев]

Да, я это понимаю.
Перекопал гугл, ничего не нашел толкового по этому поводу.

А вот кстати моя логика пока на первом варианте. Можно же сменить класс btn на другой, и все будет работать. Во втором варианте придется менять класс уже в двух местах.
Но как правильно - я не нашел. И есть ли оно - правило в БЭМ для таких случаев?

Answer 3

[Dmitry]

Можно попробовать так...

.btn
  $b: &
  &__ico
    position: absolute
    + #{$b}__text
      margin-left: 29px