Ну в библиотеке не используются псевдоселекторы, вместо этого в js контролам добавляется модификатор hovered. соответственно стиль будет выглядеть так:

.row {
  &_controls { 
    &.row_hovered {
    }
  }
}

@Guria то есть &.row_hovered, соберется в .row_controls.row_hovered. Это мне не поможет.

.row {
  &__controls { 
     visibility: hidden;
  }
  &:hover .row__controls {
     visibility: visible;
  }
}

Я хочу чтобы controls показывались, когда курсор оказывается над блоком. В вашем коде controls не покажутся, потому что над невидимыми объектами не бывает ховера

Пардон. Тогда

.row {
  &__controls { 
    visibility: hidden;
    .row_hovered & {
      visibility: visible;
    }
  }
}

PS. у вас элемент controls с одним подчёркиванием или это модификатор всё же?

@Guria да, controls – это элемент. Исправил подчеркивания для понятности.

Решение ок, но теперь повторяется .row.

@just-boris ну так это вполне норм ;)

Нет ничего страшно в повторениях. js тоже можно не подключать:

.row {
  &__controls { 
    visibility: hidden;
    .row:hover & {
      visibility: visible;
    }
  }
}

Можно использовать стайлус на полную катушку.

$ctx = row

.{$ctx} {

  &__controls {
    visibility hidden

    /.{$ctx}:hover {selector()} {
        visibility visible
    }
  }
}

@h4 можно, но зачем?

@Guria чтобы всё, что касается стилей элемента __controls лежало в одном визуальном блоке.

Вопрос @just-boris был «Как вы пишете такие конструкции?». Мы пишем из так.

@h4 если уж оптимизировать, то в $ctx сразу и класс записывать - $ctx = '.row'. Не нужно будет потом везде точку дописывать ;) Если уйти от примера, то вместо .row там может быть что-то и помассивнее, поэтому вариант с {$ctx} клевый. Просто не нужно им злоупотреблять

@sipayRT точку мы не дописываем, потому что такой ход позволяет делать так:

&__elem {
    background url(s('%s__imageName.png', $ctx))
}

@h4 у меня less, поэтому получилось как-то так:

.row {
  @name: .row;
  &__controls { 
    visibility: hidden;
    @{name}_hovered & {
      visibility: visible;
    }
  }
}

в случае, когда стилей больше чем пара строк, лучше сохранить имя блока в переменную, чтобы не потерялось при рефакторингах

@just-boris переходи на Stylus. Тут можно не писать скобочки и точки с запятой ;)

@h4 интересный кейс, спс

@h4 зато нельзя пользоваться mixin-ами bootstrap и переопределять его переменные. Но это уже другая история.

Всем спасибо за показанные примеры!

Вообще, {$ctx} штука полезная и для переименования блоков, поэтому точка там противопоказана. Ну и в целом лучше {$block} или {$b}, чтобы была возможность еще и {$elem} или {$e} использовать.

@zxqfox +1. Будто с моей головы написал слова ;)

@zxqfox ну я {$ctx} тупо из кода bem-components позаимствовал.