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