Question

我在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”，“悬停”和“活动”之间存在如下空格：

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

Answer 1

父选择器＆是Sass发明的一种特殊选择器，在嵌套选择器中使用以引用外部选择器。它做到了可以以更复杂的方式重用外部选择器，例如在父级之前添加一个伪类或一个选择器。 (from SASS official documentation)

因此，当您为伪类（之前，之后，悬停，活动等）编写规则时，要引用外部选择器（仅高一层），请按如下所示放置与号：

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

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

角度：SCSS / SASS编译器会产生多余的空格

2 个答案: