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

Posted 2023-03-06

【中文标题】Angular：SCSS / SASS编译器产生不需要的空格[重复]

【英文标题】：Angular: SCSS / SASS compiler produces unwanted whitespaces [duplicate]

【发布时间】：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 很陌生。

【参考方案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;