如何将此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;
}