如何将 sudo 类与 SASS 和 Angular 一起使用

Question

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

这是主页.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。

“萨斯”：“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 感到好奇，我会在 Codepen 中尝试 SCSS并检查它编译成的内容。

编辑 2：删除了十六进制代码周围的引号。请参阅此代码笔