角度：SCSS/SASS编译器生成不需要的空白

我在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;
    }
}

在SassMister的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 {
  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;
}

.link {
  color: blue;

  &:hover {
    color: green;
  }
}

现在，当我删除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 {
  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;
}

.link {
  color: blue;

  &:hover {
    color: green;
  }
}

第二个不带空格的选项为我提供了正确的UI结果

我的问题：如何在Angular 7中避免这些空白？

您正在寻找的

……应该是：

.Tab {
  &:hover {
     ...
  }
}

&表示：当前选择器。您可以使用&:hover来指定 {currentSelector}：悬停

如果没有符号，它将生成{currentSelector}:hover，这就是您希望它对类似

.a {
   .b {
     ...
   }
}

。。。它解析为.a.b{…}

更充分的解释

注意：符号AND还允许为当前选择器指定前缀。例如：

.a {
  .b {
    prop: value;
    .c & {
       prop: otherValue;
    }
  }
}

将解析为：

.a .b { prop: value; }
.c .a .b { prop: otherValue; }

父选择器&是Sass发明的一种特殊选择器 在嵌套选择器中用于引用外部选择器。成功了 可以以更复杂的方式重复使用外部选择器，如 在父类之前添加伪类或选择器。

因此，当您为pseudo类编写规则before、after、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 {
  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;
}

.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;
    }
}

---

谢谢你，谢尔盖！我以前找不到问题/答案，因为重复的问题没有提到空格。你让我开心！是的，这是重复的，但我找不到正确的答案，因为另一个问题没有提到不需要的空格。我对沙斯和棱角很陌生。