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-Lint错误：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;
  }
}

可合并选择器SCSS-lint

1 个答案: