如何在 SASS 和 Angular 中使用 sudo 类

Question

所以我有这个 .scss 文件可以正确获取基本样式，但无法获取 sudo 类的样式：hover。

这里是homepage.scss

.link {
  text-decoration: underline;
  color : rgb(39,82,180);
  cursor: pointer;
  
  & :hover {
      color :"#002447";
  }
}

这里是homepage.component.html中的相关代码

<li><button class="link" role="link" (click)="dostuff()">Remote Support</button></li>

颜色正确显示，光标和文本按预期显示下划线。 但是，悬停期间颜色不会改变。

如何在悬停时更改文本颜色？强烈希望使用 sass 解决方案而不是 js/angular 解决方案。

我也尝试过更传统的 CSS 方法，但也没有用。

.link  {
  text-decoration: underline;
  color : rgb(39,82,180);
  cursor: pointer;
}

.link :hover {
  color :"#002447";
}

我们可以看到悬停 sudo 类不存在。

但我们可以看到其他样式在 chrome 开发者控制台中正确显示

我也尝试删除 :hover 和 & 之间的空格，我也尝试在 CSS 版本中删除相同的空格。

在我的 package-lock.json 中，我有这些特定版本的 SASS。

"sass": "1.23.3",

"sass-loader": "8.0.0",

我也在使用foundaton.css 和font-awesome，以防有任何已知的冲突。

Answer 1

& 和 :hover 之间不需要空格。留下那里编译成如下所示的css：

.link :hover {
//...
}

这显然是不正确的。相反，我们希望编译后的 css 看起来像这样：

.link:hover {
  //...
}

改为：

.link {
  text-decoration: underline;
  color : rgb(39,82,180);
  cursor: pointer;
  
  &:hover {
      color : #002447;
  }
}

编辑：作为一般提示和对我有帮助的东西，如果我对 SCSS 中的某些内容如何编译为 CSS 感到好奇，我会去 try out the SCSS in Codepen 并检查它编译成什么。

编辑 2：删除了十六进制代码周围的引号。见this codepen