0

почему в псевдоклассе не работает ссылка на родителя? И как это вылечить?

Не работает

.logo
    display: block
    &:hover
        &__image
            animation: shake 0.5s ease

А вот так работает (по факту, из первой конструкции ожидаю получить как раз такой класс)

.logo
    display: block
    &:hover
        .logo__image
            animation: shake 0.5s ease
4
  • 2
    а какую конструкцию вы ожидаете получить из первого кода? думаете вместо & подставится .logo и получите класс .logo__image ?
    – teran
    Commented 27 мая 2019 в 19:16
  • @teran Все верно
    – user298256
    Commented 27 мая 2019 в 19:20
  • дополнил вопрос
    – user298256
    Commented 27 мая 2019 в 19:25
  • но родитель то у вас не .logo а .logo:hover в данном случае
    – teran
    Commented 27 мая 2019 в 19:36

1 ответ 1

0

Для наглядности на SCSS. В SASS перенос строки это дополнительные кавычки.

.logo {
  display: block;
  &:hover &__image {
      animation: shake 0.5s ease;
  }
}

Те вы перенесли на новый уровень и & изменился на родителя, а это псевдокласс :hover, а он пустой.

но если очень хочется то можно и так

.logo {
  display: block;
  $c: &;
  &:hover {
    #{$c}__image {
      animation: shake 0.5s ease;
    }
  }
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.