可合并选择器SCSS-lint

Question

我是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错误: MergeableSelector:合并规则.arrow--right.hover和.arrow--right

我如何在不影响我试图达到的行为的情况下合并这两条规则？

Answer 1

lint警告意味着您应该使用.hover操作符在主类选择器中加入&修改，如下所示：

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