小编ale*_*rqs的帖子

Sass与BEM,继承选择器

我正在使用Sass 3.4.1和BEM所以我的scss是:

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
}
Run Code Online (Sandbox Code Playgroud)

而且我希望每次都悬停在.photo-of-the-day带有标题的事情上,这通常在css中很常见:

.photo-of-the-day:hover .photo-of-the-day--title{
    font-size:12px
}
Run Code Online (Sandbox Code Playgroud)

事情是使用BEM这是我发现的唯一方式,看起来有点难看

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
    &:hover{
        background: red;
        /* this is ugly */
        .photo-of-the-day--title{
            text-decoration: underline;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

所以我想知道我是否可以继承.photo-of-the-day选择器并在悬停内部使用它以避免再次复制完整选择器.

理想情况下会是这样的:

.photo-of-the-day{
    &--title{
        font-size: 16px;
    }
    &:hover{
        background: red;
        &&--title{
            text-decoration: underline;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

或者接近回归到BEM的父选择器的东西.可能吗?

css sass bem

6
推荐指数
2
解决办法
1862
查看次数

标签 统计

bem ×1

css ×1

sass ×1