css - 如何将此 css 代码翻译成更好的 lesscss 代码？

Question

这是我的 DOM 结构:

<div class="item">
    <div class="item__icon"></div>
</div>

这是我的 CSS 代码:

.item__icon {
    display: none;
}

.item:hover .item__icon {
    display: block
}

然后我把它翻译成lesscss，我使用BEM命名规则:

.item {
    :hover {
        .item__icon {
            display: block;
        }
    }
    &__icon {
        display: none;
    }
}

但是，我认为 .item__icon 代码是重复的，因为当我更改 &__icon 时，我也更改了 .item__icon，这不利于维护。

有更好的办法吗？

Answer 1

一个解决方案是实际将 .item 作为字符串存储在变量中，因为您要在父级声明 .item 及其子级中重新使用它组件 .item__icon。然后你可以这样插入它:

@item: ~".item";

@{item} {
  &__icon {
    display: none;
  }

  &:hover {
    @{item}__icon {
      display: block;
    }
  }
}

这将输出:

.item__icon {
  display: none;
}
.item:hover .item__icon {
  display: block;
}