css - 条件不工作少

Question

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

这就像切换功能。如果填充值为 20px，我必须将 0px 和 0px 相同更改为 20px。

减少:

.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 */
}
/* ... */

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

---

但是您可以使用一个 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 输出。

希望我能帮上忙。