条件不能减少

Question

我尝试使用较少的更改现有的填充值，但它不起作用。是我的方式是正确的吗？请建议。

就像切换功能一样。如果填充值为20px，我必须更改0px，并将0px更改为20px。

LESS：

.add, .toggle {
    padding: 8px 20px 8px 20px;
    .theme("20px");
    &:hover {
        padding: 8px 18px 8px 18px;
      .themed("18px");
    }
    &:active {
        padding: 8px 18px 8px 18px;
      .themed("18px");
    }
    &:focus {
        padding: 8px 18px 8px 18px;
      .themed("18px");
    }
}
.theme (@mode) when (@mode = "20px") {
  padding: 8px 0px 8px 20px;
}
.themed (@mode) when (@mode = "18px") {
  padding: 8px 0px 8px 18px;
}

Answer 1

Your mixins条件对我来说很好，它们通过添加另一个填充定义来覆盖填充。示例（不完整）CSS输出：

.add,
.toggle {
  padding: 8px 20px 8px 20px;
  padding: 8px 0px 8px 20px; /* this takes effect */
}
/* ... */

如果它似乎不起作用，您可以尝试在mixin中!important之前添加;。

但是你可以使用一个mixin并使用@mode parameter inside the rule来简化LESS代码：

.add, .toggle {
  .theme(20px); // <-- no quotes

  &:hover, &:active, &:focus { // <-- merged them as they're the same
    .theme(18px); // <-- no quotes
  }
}

.theme (@mode) {
  padding: 8px 0px 8px @mode; // <-- use parameter
}

注意我也从mixin调用中删除了引号。您可以see it working here，它（有效地）生成与您的代码相同的CSS输出。

希望我能提供帮助。