我正在使用 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;
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)