Angular：SCSS / SASS编译器产生不需要的空格[重复]答案

【问题标题】：Angular: SCSS / SASS compiler produces unwanted whitespaces [duplicate]Angular：SCSS / SASS编译器产生不需要的空格[重复]
【发布时间】：2019-10-18 12:40:25
【问题描述】：

我在 Angular 7 项目中有 *.scss 文件。

编译后，编译器会在 css 中添加不需要的空格，这会导致 UI 中出现错误的结果。

要重现错误，请转到...

https://www.sassmeister.com/

...复制并粘贴以下代码。

$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 中避免这些空格？

【问题讨论】：

是的，这是重复的，但我找不到正确的答案，因为另一个问题没有提到不需要的空格。我对 SASS 和 Angular 很陌生。

标签： css angular sass compiler-errors

【解决方案1】：

父选择器 & 是 Sass 发明的一个特殊选择器在嵌套选择器中使用以引用外部选择器。它使它可以以更复杂的方式重用外部选择器，例如在父级之前添加伪类或添加选择器。 (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;
    }
}

【讨论】：

谢谢谢尔盖！我之前找不到问题/答案，因为重复的问题没有说明任何关于空格的内容。你让我开心！

【解决方案2】：

您正在寻找the sass ampersand。

.Tab {
  :hover {
     ...
  }
}

...应该是：

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

【讨论】：