8

私は 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
}

これは私が見つけた唯一の方法であり、ちょっと醜いように見えます

.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 の親セレクターへのカムバックに近いもの。出来ますか?

4

2 に答える 2