<分区>
<分区>
我在 Angular 7 元素中有 *.scss 文件。
编译后，编译器会向 css 添加不需要的空格，这会导致 UI 中出现错误结果。
要重现错误，请转到...
...复制并粘贴以下代码。
$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 和悬停之间的空格并激活时，它看起来像这样:
.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 中出现这些空格？
最佳答案
The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent. (from SASS official documentation)
因此，当您为伪类(before、after、hover、active 等)编写规则以引用外部选择器(仅高一级)时，像这样放置 & 符号:
.link {
color: blue;
&:hover {
color: green;
}
}
因此，您的 SCSS 代码可以重写为:
$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;
}
}
关于css - Angular:SCSS/SASS 编译器产生不需要的空格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56419219/