我正在使用Sass 3.4.1和BEM所以我的scss是：
.photo-of-the-day{
&--title{
font-size: 16px;
}
}
而且我希望每次都悬停在.每天都会发生一些带有标题的事情,这通常在css中很常见：
.photo-of-the-day:hover .photo-of-the-day--title{
font-size:12px
}
事情是使用BEM这是我发现的唯一方式,看起来有点难看
.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的父选择器的东西.可能吗？
解决方法
如果你坚持筑巢一切,你能做的最好的就是：
.photo-of-the-day {
$root: &;
&--title{
font-size: 16px;
}
&:hover{
#{$root}--title {
text-decoration: underline;
}
}
}
