Sass 与 BEM，继承选择器

Question

我使用的是 Sass 3.4.1 和 BEM，所以我的 scss 是：

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

我希望每次将鼠标悬停在 .photo-of-the-day 上时，标题都会发生一些事情，这很常见，所以通常在 css 中：

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

问题是使用 BEM，这是我发现的唯一方法，看起来有点丑

.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 选择器并在悬停时使用它以避免再次复制完整的选择器。

理想情况下是这样的：

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

或者接近回归到 BEM 的父选择器的东西。有可能吗？

Answer 1

如果你坚持嵌套一切，你能做的最好的就是：

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

Answer 2

您可以使用以下语法：

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