Question

我正在努力做到这一点，以便当下拉菜单的所有子项都处于焦点状态时，下拉菜单仍然可见。为了做到这一点，我需要将“祖父母”另存为变量，以便在孩子集中时可以修改其样式：

.mainNavigation__desktop__content {
  $mainNavigation: &; // 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预览）都无法加载。如果我将此变量更改为其他变量，则该网站将加载，没有任何问题。

有什么我想念的吗？我无法以这种方式访问父选择器吗？我见过的将父选择器另存为变量的所有示例都显示了确切的语法。

Answer 1

您无法使用变量创建类似的选择器，需要使用插值：

#{$mainNavigation} {}

无论哪种方式，您都无法基于使用此方法使孩子们专注于父母来设置样式，您可能要看一下focus-within

有没有一种方法可以将父选择器（$）保存为SCSS中的变量？

1 个答案: