使用BASS和SASS声明活动/聚焦/悬停状态的正确方法是什么?例如,我有这样的结构:
和SCSS:
.card { &__image { } &__overlay { } &__title { } }
我想在悬停在块上时修改元素.这不起作用:
.card { &__overlay { display: none; } &:hover { &__overlay { display: block; } } }
并且必须.project__image
为这一个实例编写整体似乎是错误的.
有没有其他方法可以实现这一目标?
您可以使用Sass&符号选择器获得所需的结果,而无需使用变量或插值.
如果正确使用,使用&符号(&)引用父选择器可以是一个强大的工具.此功能有一些简单的用途,以及此功能的一些非常复杂的用途.
例如:
.card { &__overlay { display:none; } &:hover & { &__overlay { display: block; } } }
结果是:
.card__overlay { display: none; } .card:hover .card__overlay { display: block; }
此代码使用较少的语言结构(例如,不使用变量或插值),因此可以说是更清晰的实现.
阅读有关插值的更多信息:http: //sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_
SCSS:
.card { $root: &; &__overlay { display: none; #{$root}:hover & { display: block; } } }
结果:
.card__overlay { display: none; } .card:hover .card__overlay { display: block; }
PS.它类似于@alireza safian post,但是通过这种方式,您不需要复制类名.变量$root
为你做:)