我正在使用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
}
事情是使用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的父选择器的东西。有可能吗?
答案 0 :(得分:6)
如果你坚持筑巢一切,你能做的最好就是:
.photo-of-the-day {
$root: &;
&--title{
font-size: 16px;
}
&:hover{
#{$root}--title {
text-decoration: underline;
}
}
}
答案 1 :(得分:6)
您可以使用以下语法:
.photo-of-the-day {
&--title {
font-size: 16px;
}
&:hover &--title {
text-decoration: underline;
}
}