萨斯找父母或父母

Question

有更好的方法吗？

.element{
    &-modifier{
        color: green;
    }
    &:hover{
        .element-modifier{
            color: red;
        }
    }
}

在这种情况下，如果我们更改类"。然后悬停将停止工作

我知道一个解决方案，但它不能完全解决问题，

.element{
    $this: &;
    &-modifier{
        color: green;
    }
    &:hover{
        #{$this}-modifier{
            color: red;
        }
    }
}

在这种情况下，我们需要创建很多变量($ this，$ this2，$ this3 ...(

因此，有一种更好的方法可以让父母或父母孩子？

Answer 1

此逻辑有用吗？

更新的小提琴

sass

.test{
    &-modifier{
        color: green;
    }
    &:hover &-modifier{
        color: red;        
    }
}

html

<div class="test">
  <div class="test-modifier">test</div>
</div>

---

这是基于给定评论的更多变体

.test{
    &-modifier{
        color: green;
    }
    &-modifier2{
        color: green;
    }
    &:hover &-modifier,
    &:hover &-modifier2
    {
        color: red;        
    }}

.test{
    &-modifier{
        color: green;
    }
    &-modifier2{
        color: green;
    }
    &:hover &-modifier2 {
        color: red;        
    }
}

.test{
    &-modifier{
        color: green;
    }
    &-modifier2{
        color: green;
    }
    &-modifier2:hover {
        color: red;        
    }
}

Answer 2

这是另一个解决方案，它不会引入类名称的变量，但要求您放弃一些嵌套，因为您只能访问完整的父级选择器。

.element{
    &-modifier{
        color: green;
    }
    &:hover &-modifier {
        color: red;
    }
}

输出：

.element-modifier {
  color: green;
}
.element:hover .element-modifier {
  color: red;
}