悬停时如何为元素设置相同的颜色？

Question

我只是想在显示时和将鼠标悬停时将相同边框颜色设置为元素，但是由于某些原因，我无法使自己的工作正常。谁能指出我正确的方向？非常感谢！

这是我的混蛋

这不起作用：

.myfield{
  &:hover{
    border: 2px solid red;
  }
}

这有效：

.myfield{
  border: 2px solid red;
  &:hover{
    border: 2px solid red;
  }
}

但是我不想重复相同的边框2次。正确的写法是什么？

Answer 1

尽管我可能很难看到两次设置相同的边框（对于选择器和选择器：悬停），但这可能对您有用：

.myfield {
  &, &:hover{
    border: 2px solid red;
  }
}

结果如下：

.myfield, .myfield:hover {
  border: 2px solid red;
}

这应该与上面代码（标记为Working）的语义等效，该代码会产生：

.myfield {
  border: 2px solid red;
}
.myfield:hover {
  border: 2px solid red;
}

编辑：尝试查看https://www.sassmeister.com/，以对生成的CSS进行“简单”测试。这通常比尝试“现实生活”容易，尤其是当所有sass / scss通过资产管道等运行时。