代码之家 › 专栏 › 技术社区 › Chris O'Kelly

悬停时的反转状态

less-mixins less css

Chris O'Kelly · 技术社区 · 9 年前

我有以下LESS代码:

.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 , .review-action-link 等等),而这在我看来很混乱。有没有办法创建一个mixin,这样我就可以这样提供:

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

还是类似的?到目前为止,我能想到的唯一方法是:

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

然后使用jQuery进行悬停切换 .active 在…上 (isHovering XOR hasClass(is-favourite)) -但将LESS转换为LESS+jQuery与修复混乱/可维护性问题相反。

1 回复 | 直到 9 年前

Harry dbr 9 年前

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

.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();
  }
}