Как правильно переписать scss?

Question

[Лариса]

Помогите пожалуйста корректно переписать пример нижний в scss

.test {
  &:hover { 
         /* вот сюда */
  }

  &__title, 
  &__name{
  color: green;
  }
}

/* вот этот код расписать в код выше   */
.test:hover .test__title,  
.test:hover .test__name{
  color: red;
}

Comments

[Лариса]

У меня только вот такой вариант получается, но может красивое решение

.test {

 &:hover &__title, 
 &:hover &__name{
  color: green;
  }
}

Answer 1

[display: block]

.test{
  $root: &;
  &:hover{
    #{$root}__title,
    #{$root}__name{
      color: red;
    }
  }
}

Comments

[Лариса]

Огромное спасибо)
Буду всегда пользоваться.

Answer 2

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

.test {
  &:hover &__title { 
        
  }
  &:hover &__name{ 
        
  }
}

Либо (но это не удобный вариант):

.test {
  &:hover { 
        .test__title{}
        .test__name{}
  }
}

UPD: А если поискать на стековерфлоу, то можно узнать как все-таки это делается: https://stackoverflow.com/questions/34021910/bem-w...

UPD: Сам для себя, да и для вас выбрал самый нормальный вариант реализации:

.test { 

    &__name {
        color: red;
    }

    &:hover & {
        &__name  {
            color: green;
        }   
    }
}

Важно не забывать про амперсанд после :hover, тогда можно будет писать в "привычном" для вас виде.

Comments

[Одиночка Айс]

Почему второй вариант не удобный? Вроде по вложенности же все норм

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

Одиночка Айс, он не удобен тем, что нужно всегда знать класс родителя, то есть нельзя написать &__title {}, не задумываясь над тем, какой же класс вместо & подставится. Когда у вас в классе .test будет 3 десятка подклассов, такая конструкция неудобна будет тем, что нужно вечно пролистывать наверх и узнавать, какой же родительский класс ты сейчас описываешь.

Answer 3

[zooks]

css2sass.herokuapp.com