可合并选择器SCSS lint

我是CSS的初学者，我正在从事一个项目，该项目使用scss lint验证样式表格式

我有以下课程：

.arrow--right {
  border-bottom: 12px solid transparent;
  border-left: 12px solid $border-color;
  border-top: 12px solid transparent;
  cursor: pointer;
  height: 0;
  transform: rotate(0deg);
  transition: transform .1s linear;
  width: 0;
}

.arrow--right.hover {
  border-left-color: $brand-highlight;
}

其思想是，每当我将鼠标悬停在其他元素上时，

hover

类就会被添加到箭头中，从而为其着色

SCSS Lint错误：MergeableSelector:合并规则

。箭头--右。使用
悬停
。箭头--右

---

如何合并这两个规则而不影响我试图实现的行为？

lint警告意味着您应该使用

&

操作符在主类选择器中加入

。悬停
修改，如下所示：

.arrow--right {
  border-bottom: 12px solid transparent;
  border-left: 12px solid $border-color;
  border-top: 12px solid transparent;
  cursor: pointer;
  height: 0;
  transform: rotate(0deg);
  transition: transform .1s linear;
  width: 0;

  &.hover {
    border-left-color: $brand-highlight;
  }
}