用于在悬停时添加子覆盖的 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{对齐。