我有一个Angular 7项目中的*.scss文件。
编译后,编译器将不需要的空格添加到css中,这会导致UI中出现错误结果。
要重现该错误,请转到...
...copy并粘贴以下代码。
$color-background-default: white;
$color-foreground-default: black;
$color-background-disabled: #d3d3d3;
$color-foreground-disabled: #808080;
$color-background-mouseover: #00a7dc;
$color-foreground-mouseover: white;
$color-background-mousedown: #00467F;
$color-foreground-mousedown: white;
.Tab
{
background-color: $color-background-default;
color: $color-foreground-default;
:hover
{
background-color: $color-background-mouseover;
color: $color-foreground-mouseover;
}
:active
{
background-color: $color-background-mousedown;
color: $color-foreground-mousedown;
border-color: $color-background-mousedown;
}
}
在Sassmeister的CSS框中,您应该看到,在".Tab“、"hover”和"active“之间有空格,如下所示:
.Tab {
background-color: white;
color: black;
}
//WHITESPACE AFTER Tab
.Tab :hover {
background-color: #00a7dc;
color: white;
}
//WHITESPACE AFTER Tab
.Tab :active {
background-color: #00467F;
color: white;
border-color: #00467F;
}
现在,当我删除Tab、hover和active之间的空格时,它看起来如下所示:
.Tab {
background-color: white;
color: black;
}
//NO WHITESPACE AFTER Tab!
.Tab:hover {
background-color: #00a7dc;
color: white;
}
// NO WHITESPACE AFTER Tab!
.Tab:active {
background-color: #00467F;
color: white;
border-color: #00467F;
}
不带空格的第二个选项给出了正确的UI结果。
我的问题:在Angular 7中如何避免这些空格?
发布于 2019-06-03 06:12:02
.Tab {
:hover {
...
}
}
...should be:
.Tab {
&:hover {
...
}
}
&
的意思是:“当前选择器”。您可以使用&:hover
指定
#{currentSelector}:hover
。
如果没有与号,它就会生成#{currentSelector} :hover
,这就是您希望它在如下结构中工作的方式
.a {
.b {
...
}
}
..。它解析为.a .b {...}
。
更充分的解释here。
注意:&符号还允许指定当前选择器的前缀。例如:
.a {
.b {
prop: value;
.c & {
prop: otherValue;
}
}
}
将解析为:
.a .b { prop: value; }
.c .a .b { prop: otherValue; }
https://stackoverflow.com/questions/56419219
复制相似问题