Css 带边界元的Sass，继承选择器

我正在使用Sass 3.4.1和BEM，因此我的SCS是：

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
}

我希望每次鼠标悬停在

。当天的照片

上都会出现标题，这在css中非常常见：

.photo-of-the-day:hover .photo-of-the-day--title{
    font-size:12px
}

事情是用边界元法，这是我发现的唯一方法，看起来有点难看

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
    &:hover{
        background: red;
        /* this is ugly */
        .photo-of-the-day--title{
            text-decoration: underline;
        }
    }
}

因此，我想知道是否可以继承当天的照片选择器，并在悬停中使用它，以避免再次复制完整的选择器

理想的情况是：

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
    &:hover{
        background: red;
        &&--title{
            text-decoration: underline;
        }
    }
}

---

或者接近于返回到BEM的父选择器。有可能吗？

如果你坚持要嵌套所有东西，那么你能做的最好的事情就是：

.photo-of-the-day {
    $root: &;
    &--title{
        font-size: 16px;
    }
    &:hover{
        #{$root}--title {
            text-decoration: underline;
        }
    }
}

---

您可以使用以下语法：

.photo-of-the-day {
    &--title {
        font-size: 16px;
    }
    &:hover &--title {
        text-decoration: underline;
    }
}

---

问题是，如果我这样做，我就失去了悬停范围，因此无法执行：

&:hover{cursor:pointer；background:red；…当天的照片--title{text decoration:underline；}}

@alexrqs And？没有规定说你必须把所有的东西都套起来。有嵌套的解决方案实际上更加冗长。@alexrqs您必须独立于

&:hover&--title

@alexrqs使用

&:hover{/*…*/}

，您完全正确。虽然这样做有效，但这意味着重复

：hover

选择器需要多少次，从而失去SASS提供给您的任何方面。很伤心，我为这个做了混音。这是我的另一个答案：