我正在使用 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 父选择器的东西。可以吗?
如果你坚持嵌套所有东西,你能做的最好的就是这样:
.photo-of-the-day {
$root: &;
&--title{
font-size: 16px;
}
&:hover{
#{$root}--title {
text-decoration: underline;
}
}
}
您可以使用以下语法:
.photo-of-the-day {
&--title {
font-size: 16px;
}
&:hover &--title {
text-decoration: underline;
}
}
我以为可以使用&--使用纯CSS,但结果CSS中不支持