1

我是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：合并.arrow--right.hover规则.arrow--right

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

4

1 回答 1

2

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;
  }
}
于 2018-04-25T20:51:20.047 回答