Sass用BEM，继承选择器 [英] Sass with BEM, inherit selector

问题描述

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

I'm using Sass 3.4.1 and BEM so my scss is:

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

我想每次将鼠标悬停在

and I want every time hover over .photo-of-the-day something happen with title, that's pretty common so usually in css:

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

事情是使用BEM这是我发现和看起来很丑的唯一方式

the thing is using BEM this is the only way I found and looks kinda ugly

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

so I was wondering if I can inherit .photo-of-the-day selector and use it inside the hover to avoid copy again the full selector.

理想情况下应该是这样：

Ideally would be something like:

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

BEM的父选择器。是可能吗？

Or something close to comeback to the parent selector for BEM. Is it possible?

推荐答案

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

If you insist on nesting everything, the best you can do is this:

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

这篇关于Sass用BEM，继承选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！