css - 如何引用 SCSS 兄弟？

Question

假设我有以下 HTML:

<div class="navigation__item">
  <span class="navigation__item__icon"></span>
</div>

我想在鼠标悬停在元素上时对图标应用一些规则，可以用以下 CSS 描述:

.navigation__item__icon {
  color: black;
}

.navigation__item:hover .navigation__item__icon {
  color: white;
}

我可以使用以下 SCSS 实现此目的:

.navigation__item {
  &:hover {
    .navigation__item__icon { <-- here
      color: white;
    }
  }

  &__icon {
    color: black;
  }
}

这里，有什么办法可以避免写navigation__item吗？类似“父规则\元素”的东西。我喜欢 Sass 的逻辑结构，所以如果我想用元素重命名整个 navigation block ，我可以简单地更改根目录中的 navigation 类名，一切都被重命名。本案例打破了这一优势。

更新:实际上，我找到了一种无需使用 {} 大括号即可执行此操作的方法。 & 可以重复多次:

.navigation__item {
  &:hover &__icon {
    color: white;
  }

  &__icon {
    color: black;
  }
}

这很棒，但是如果我对&:hover本身有很多规则和规则，那意义不大。问题仍然悬而未决 - 是否可以从 {} block 中访问同级元素定义。

Answer 1

在 Stylus 中有一个 Partial reference但我不知道 SASS 有什么类似的东西。一种解决方案是为父选择器使用变量:

.navigation__item {
  $selector: &;
  &:hover {
    #{$selector}__icon {
      color: white;
    }
  }

  &__icon {
    color: black;
  }
}

将 navigation__item 类更改为另一个很有用。

编辑:我用了一个错误的例子，现在没问题了。