我正在使用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的父选择器的东西.可能吗?