Sass ссылка на родителя в псевдоклассе

137

13 января 2021, 02:40

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

Не работает

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

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

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

Answer 1

Для наглядности на 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;
    }
  }
}

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Рисование на виджете вне функции paintEvent ()

Возможно ли рисовать на виджете при помощи QPainter вне функции paintEvent ()? В документации написано, что из всех стандартных бэкэндов, QWidget единственный,...

129

c++