CSS初学者求助：scss-lint合并选择器问题及hover类实现疑问

Hey fellow CSS beginner! I totally get where you're coming from with this scss-lint mergeable selector issue—let's break it down and fix it together.

What's the Problem? #

scss-lint's MergeableSelector rule is flagging your code because you've split styles for the same base selector (.arrow--right) into two separate rule blocks. It wants you to use SCSS's nesting feature to group related styles together, which makes your code cleaner and more maintainable.

The Fix: Nest Your .hover Class #

Instead of writing two separate selectors, nest the .hover variant inside the base .arrow--right selector using SCSS's & (parent selector) syntax. Here's how your corrected code will look:

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

  // Nest the hover class using & to reference the parent selector
  &.hover {
    border-left-color: $brand-highlight;
  }
}

Why This Works #

• The & in &.hover translates to the parent selector (.arrow--right), so the compiled CSS will still be .arrow--right.hover—exactly what you need for your JS-triggered hover state.
• scss-lint will no longer throw a Mergeable Selector warning because all styles related to .arrow--right are grouped in a single rule block.
• Your code stays organized, making it easier to update arrow styles later on.

Quick Note on Your Hover Trigger #

Since you're using a custom .hover class (instead of the native :hover pseudo-class) to trigger styles when another element is hovered, just make sure your JavaScript correctly adds and removes this class from the arrow element when the target element's hover state changes. That part is totally separate from the scss-lint issue, but it's good to double-check!

内容的提问来源于stack exchange，提问作者Franch