使用When Guard清除mixin，以减少Less不起作用 [英] Clear mixin for Less not working using When Guard

问题描述

我正在尝试创建一个简单的较少mixins来进行清除，所以我有:

I am trying to create a simple less mixins for clear so I have:

.clear {

  &:after {
    content: "";
    display: table;
    clear: both;
  } // :after

}

.clear(@float) when (@float = "left", @float = "right") {
  clear: @float;
}

基本上，我想同时清除使用".clear"或".clear(both)"和第二个同时使用.clear("left")或".clear(" right).

Basically I want to clear both when I use ".clear" or ".clear(both)" and the second one when I use .clear("left") or ".clear("right").

我该怎么做?

谢谢， 米格尔(Miguel)

Thank You, Miguel

推荐答案

#1 最直接的方法是使用 default mixin后卫:

#1 The most straightforward way is to use default mixin guard:

.clear(...) when (default()) {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

.clear(@float) when (@float = left), (@float = right) {
    clear: @float;
}

#2 或:

.clear(...) when (default()) {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

.clear(left)  {clear: left}
.clear(right) {clear: right}

#3 ，在这种情况下甚至更为干净/最佳(并且还兼容较旧的Less版本)

#3 Or even more clean/optimal in this case (and also old Less versions compatible) Pattern Matching for all variant:

.clear() {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

.clear(both)  {.clear()}
.clear(left)  {clear: left}
.clear(right) {clear: right}

---

...和第二个，当我使用.clear("left")或".clear("right")时.

不要在此处使用引号，正确的用法是:

Don't use quotes there, correct usage would be:

.clear;
.clear();
.clear(both);
.clear(left);
.clear(right);

这篇关于使用When Guard清除mixin，以减少Less不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！