Question

有更好的方法吗？

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

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

在这种情况下，如果我们在第一行更改类“.element” 然后悬停将停止工作

我知道一个解决方案，但它并没有完全解决问题，

.element{
    $this: &;

    &-modifier{
        color: green;
    }

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

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

所以有更好的方法让父母或父母的孩子？

Answer 1

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

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

    &:hover &-modifier {
        color: red;
    }
}

输出：

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

Answer 2

这个逻辑有用吗？

Updated fiddle

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;        
    }
}

Sass得到父母或父母的孩子

2 个答案: