Question

我有以下LESS代码：

A=[1,5,15]

基本目标是存在正常状态和悬停状态，当存在另一个类时，这反过来。我将重复此操作用于其他操作（例如.favourite-action-link { &:after { color:@grey; content: '\e836'; } &.is-favourite:after { color:@red; content: '\e811'; } &:hover { &:after { color:@red; content: '\e811'; } &.is-favourite:after { color:@grey; content: '\e836'; } } }，.share-action-link等），这看起来就像我拥有它一样混乱。有没有办法创建一个mixin，以便我可以这样提供：

.review-action-link

或类似的东西？到目前为止，我能想到的唯一方法就是：

.favourite-action-link {
    &:after {
        color:@grey;
        content: '\e836';
        &:hover {
            color:@red;
            content: '\e811';
        }
        .reverseOnClass(is-favourite);
    }
}

然后使用jQuery来执行悬停 - 在.favourite-action-link { &:after { color:@grey; content: '\e836'; } &.active:after { color:@red; content: '\e811'; } }上切换.active - 但是将LESS变为LESS + jQuery与修复混乱/可维护性问题相反。

Answer 1

我真的建议像下面那样编写它，因为它使代码简单易读。

.favourite-action-link {
  &:after, &.is-favourite:hover:after {
    color: @grey;
    content: '\e836';
  }
  &:hover:after, &.is-favourite:after {
    color: @red;
    content: '\e811';
  }
}

但如果您真的想使用mixin来避免重复选择器，那么您可以像下面那样编写它。这个mixin将两个规则集作为输入，并将它们应用于所需的选择器。

.favourite-action-link {
  .rules-gen(
    {
      color: @grey;
      content: '\e836';
    };
    {
      color: @red;
      content: '\e811';
    }
  );
}

.rules-gen(@rule1; @rule2){
  &:after, &.is-favourite:hover:after {
    @rule1();
  }
  &:hover:after, &.is-favourite:after {
    @rule2();
  }
}

在这两种方法中，选择器也被分组，这也意味着减少了代码行。

Demo

或者，如果额外的课程并不总是is-favourite而且它也可能是其他课程，那么您也可以将它作为参数传递给mixin：

.favourite-action-link {
  .rules-gen(
    {
      color: grey;
      content: '\e836';
    };
    {
      color: red;
      content: '\e811';
    };
    ~"is-favourite"
  );
}

.share-action-link {
  .rules-gen(
    {
      color: yellow;
      content: '\e836';
    };
    {
      color: gold;
      content: '\e811';
    };
    ~"active"
  );
}

.rules-gen(@rule1; @rule2; @addedClass){
  &:after, &.@{addedClass}:hover:after {
    @rule1();
  }
  &:hover:after, &.@{addedClass}:after {
    @rule2();
  }
}

Demo

用Less减去悬停时的反转状态

1 个答案: