如何参考SCSS兄弟?

时间:2016-08-03 11:25:25

标签: css sass

假设我有以下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块,我可以简单地在根中更改navigation类名,并重命名所有内容。这种情况打破了这一优势。

更新:实际上,我已经找到了一种方法,可以在不使用{}大括号的情况下执行此操作。 &可以重复多次:

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

  &__icon {
    color: black;
  }
}

这很棒,但如果我对&:hover本身有很多规则和规则,那就没有多大意义了。问题仍然是开放的 - 这可以从{}块中访问兄弟元素定义。

1 个答案:

答案 0 :(得分:1)

在手写笔中有一个Partial reference但我在SASS中并不知道任何相似之处。一种解决方案可能是为父选择器使用变量:

@echo off
for /f "delims=" %%i in ('WMIC COMPUTERSYSTEM GET MODEL /Value') do (
    for /F "delims=" %%X in ("%%i") do set output=%%X
)

有用的是你为另一个人改变.navigation__item { $selector: &; &:hover { #{$selector}__icon { color: white; } } &__icon { color: black; } } 课程。

编辑:我使用了一个错误的例子,现在好了。