Sass/Scss:在生成的CSS中更改:before和:hover的嵌套psuedo选择器的顺序?
鉴于以下Sass:Sass/Scss:在生成的CSS中更改:before和:hover的嵌套psuedo选择器的顺序?,sass,compass-sass,Sass,Compass Sass,鉴于以下Sass: div.test { display: inline-block; background-color: #ffffff; color: #000000; &:before { & { &:hover { border: 1px solid salmon; } } width: 25px;
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:before {
& {
&:hover {
border: 1px solid salmon;
}
}
width: 25px;
height: 25px;
content: "";
}
}
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:hover {
&:before {
border: 1px solid salmon;
}
}
&:before {
width: 25px;
height: 25px;
content: "";
}
}
生成的CSS编译为:
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
}
div.test:before {
width: 25px;
height: 25px;
content: "";
}
div.test:before:hover {
border: 1px solid salmon;
}
我试图做的是生成div.test:hover:before(当前输出是before:hover)
注意:我可以使用以下SAS生成预期的CSS:
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:before {
& {
&:hover {
border: 1px solid salmon;
}
}
width: 25px;
height: 25px;
content: "";
}
}
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:hover {
&:before {
border: 1px solid salmon;
}
}
&:before {
width: 25px;
height: 25px;
content: "";
}
}
但是,我想知道是否可以使用第一个嵌套方法或对其进行一些修改
我们的目标是,如果有这样一种使用Sass语法的方法,那么就不必重复&:before。我也同意这是不可能的。而作为一个可以操纵的字符串,您可以在任何需要的地方插入值。不幸的是,您需要等待一段时间才能做到这一点。目前,&是不可变的,它的意思是“到目前为止的选择器链是什么”
编辑(2020.02.15):
现在,通过dart sass的最新版本在技术上可以实现这一点:
@use "sass:selector";
@mixin unify-parent($child) {
@at-root #{selector.unify(&, $child)} {
@content;
}
}
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:before {
width: 25px;
height: 25px;
content: "";
@include unify-parent(":hover") {
border: 1px solid salmon;
}
}
}
资料来源: