假设我有以下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
本身有很多规则和规则,那就没有多大意义了。问题仍然是开放的 - 这可以从{}块中访问兄弟元素定义。
答案 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;
}
}
课程。
编辑:我使用了一个错误的例子,现在好了。