Есть ли способ сохранить родительский селектор ($) как переменную в SCSS?

#css #sass

Вопрос:

Я пытаюсь сделать так, чтобы при фокусировке любых дочерних элементов выпадающего меню выпадающее меню оставалось видимым. Для этого мне нужно сохранить «дедушку» в качестве переменной, чтобы я мог изменять его стили, когда дочерние элементы сфокусированы:

 .mainNavigation__desktop__content {
  $mainNavigation: amp;; // save parent selector as variable
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  position: absolute;
  background: #fefefe;
  top: 100%;
  width: 100%;
  right: 0px;
  left: 0px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.3s;
  margin: 0;
  z-index: 99;
  padding: 34px 120px 35px 120px;
  text-align: left;
  *:focus {
    // Access variable to make grandparent of child element visible
    $mainNavigation {
      border-bottom: 1px solid #d8d8d8;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
}

Однако мой сайт (Shopify preview) не загружается всякий раз, когда я пытаюсь сохранить родительский селектор (amp;) в переменной. Если я изменю эту переменную на что-либо другое, сайт загрузится без каких-либо проблем.

Я чего-то не понимаю? Я не могу получить доступ к родительскому селектору таким образом? Все примеры, которые я видел для сохранения родительского селектора в качестве переменной, показывают именно этот синтаксис.

1. Вы не можете стилизовать родительский элемент на основе :focus состояния дочернего элемента в CSS или Sass. Вы можете стилизовать элемент A только на основе элемента B, если (B содержит A) или (B является родственным A и предшествует A).

2. @Sean ты не знаешь, есть ли какой-нибудь обходной путь? Или я должен просто использовать необработанный CSS?

3. Это также невозможно в CSS. Это просто не так, как работает CSS.

Ответ №1:

Вы не можете создавать подобные селекторы с переменными, вам нужно использовать интерполяцию:

 #{$mainNavigation} {}

В любом случае, вы не можете создать родительский стиль, основанный на фокусировке дочерних элементов, используя этот метод, вы можете захотеть посмотреть на focus-within

1. Большое спасибо! Я не знал о селекторе focus-within! Отсутствие интерполяции было опечаткой с моей стороны; страница по-прежнему не загружалась, даже если я удалил этот раздел кода и сохранил только ту часть, где я сохраняю родительский селектор в переменной. Мне все еще было бы очень интересно узнать, есть ли способ сохранить amp; в переменной.

2. Вы можете сохранить amp; в переменную в scss, хотя? Я делаю это постоянно. Вы получаете какие-либо ошибки компиляции? css-tricks.com/snippets/sass/caching-current-selector-sass