Angular: SCSS / SASS编译器生成不需要的空格
Angular: SCSS / SASS编译器生成不需要的空格
提问于 2019-06-03 05:55:45
我有一个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中如何避免这些空格？
回答 1
Stack Overflow用户
发布于 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; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56419219
复制相关文章
相似问题