我有一个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中如何避免这些空格?
https://stackoverflow.com/questions/56419219
复制相似问题