S CSS Вложенные Предки

Question

Пожалуйста, смотрите мой комментарий в моем коде S CSS.

Возможно ли еще такое углубление в SASS? Я уверен, что нашел решение, которое я был счастлив годами go, но я забыл его. Может ли кто-нибудь помочь пролить свет на то, как я могу go об этом типе вложенности.

S CSS

.class {
    color: red;

    &__nested {
        color: green;
    }

    &__link {
        color: yellow;

        &:hover {
            border: 1px solid yellow;

            ^^&__nested { // Is something like this one possible?
                color: pink;
            }
        }
    }
}

Скомпилировано

.class {
    color: red;
}

.class__nested {
    color: green;
}

.class__link {
    color: yellow;
}

.class__link:hover {
    border: 1px solid yellow;
}

.class__link:hover .class__nested { // Is something like this one possible?
    color: pink;
}

Я не хочу определять переменную как таковую.

.class {
    $parent: .class;

    &__link {
        color: yellow;

        &:hover {
            border: 1px solid yellow;

            #{$parent}__nested {
                color: pink;
            }
        }
    }
}

Answer 1

Вы сказали, что нет такой переменной, как ".class", но если вы просто пытаетесь избежать строгой типизации, и ничто не мешает вам на самом деле использовать переменную, вы можете сделать & как:

.class {
  $self: &;

  color: red;

  &__link {
    color: yellow;
  }

  &__nested {
    color: green;

    &:hover + #{ $self }__link {
      color: pink;
    }  
  }
}

JSFiddle рабочего примера: https://jsfiddle.net/gy3zLqsm/