可合并选择器 SCSS-lint

Question

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

我有以下 classes:

.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 class 就会添加到箭头上，从而为其着色。

SCSS-Lint error: MergeableSelector: Merge rule .arrow--right.hover with .arrow--right

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

Answer 1

lint 警告意味着您应该使用 & 运算符在主 class 选择器中加入 .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

Mergeable selector SCSS-lint

css

sass

css-selectors

scss-lint