用于在悬停时添加子覆盖的SCSS代码样式

Question

我很好奇是否有人以时尚的方式解决了这个问题，你需要在模块的孩子身上添加悬停修改器：

.moduleName{
    &-item{
        &-figure{ ... }
    }



    &:hover{
        ...
        .moduleName-item{
            ...
        }
        .moduleName-item-figure{
            ...
        }
    }
}

我发现上面的例子非常难看，因为moduleName和moduleName-item是重复的，并且看起来不太好。

我也不喜欢将模块名放在变量中。

不太确定我在寻找什么，这只会困扰我。

Answer 1

&:hover &-child怎么样？您将无法将所有悬停覆盖包装在一起，但它至少会阻止您重复模块名称。

.moduleName{
    &-item{
        &-figure{ ... }
    }

        &:hover &-item{
            ...
        }

        &:hover &-item-figure{
            ...
        }
}

我有覆盖缩进以显示它们具有更高的特异性，但是你可以从语法上看到它们通常与&-item{对齐。