LESS CSS mixin：当变量是特定值时，我如何隐藏样式？

Question

我为自己编写了一些使用这种标准语法的 mixin，它真的很有帮助。但是如果出现某个值，我想隐藏一些代码。

这是可行的（断点是假的，~"" 代码是默认告诉 LESS 编译为空）：

// LESS MIXIN (CURRENT)
.margin(@lg: ~""; @md: ~""; @sm: ~""; @xs: ~""; @xxs: ~"") {
    margin: @lg;
    @media screen and (max-width: 1200px) {
        margin: @md;
    }
    @media screen and (max-width: 800px) {
        margin: @sm;
    }
    @media screen and (max-width: 600px) {
        margin: @xs;
    }
    @media screen and (max-width: 400px) {
        margin: @xxs;
    }
}

可以这样实现

// LESS IMPLEMENTATION (CURRENT & EXPECTED)
div {
    .margin(20px; ~""; 15px; ~""; 10px);
}

会像这样输出：

/* CSS OUTPUT (CURRENT) */
div {
    margin: 20px;
}
@media screen and (max-width: 1200px) {
    div {
        margin: ;
    }
}
@media screen and (max-width: 800px) {
    div {
        margin: 15px;
    }
}
@media screen and (max-width: 600px) {
    div {
        margin: ;
    }
}
@media screen and (max-width: 400px) {
    div {
        margin: 10px;
    }
}

这很简单，让我不用为基本样式做大量的@media 断点。但我什至不想打印一个空的@media 行；我希望代码像这样编译：

/* CSS OUTPUT (DESIRED) */
div {
    margin: 20px;
}
@media screen and (max-width: 800px) {
    div {
        margin: 15px;
    }
}
@media screen and (max-width: 400px) {
    div {
        margin: 10px;
    }
}

所以...我尝试了一些事情并找到了这个& when 代码here，但是当我在这里实现它时它似乎不起作用。这是我尝试过的：

// LESS MIXIN (FAILED ATTEMPT TO SMARTEN)
.margin(@lg: ~""; @md: ~""; @sm: ~""; @xs: ~""; @xxs: ~"") {
    & when not (@lg = ~"") {
        margin: @lg;
    }
    & when not (@md = ~"") {
        @media screen and (max-width: 1200px) {
            margin: @md;
        }
    }
    & when not (@sm = ~"") {
        @media screen and (max-width: 800px) {
            margin: @sm;
        }
    }
    & when not (@xs = ~"") {
        @media screen and (max-width: 600px) {
            margin: @xs;
        }
    }
    & when not (@xxs = ~"") {
        @media screen and (max-width: 400px) {
            margin: @xxs;
        }
    }
}

任何人有任何想法来隐藏可以在 LESS 中工作的@media 代码吗？

Answer 1

根据参数，有多种方法可以应用 mixin 的各个部分。我能想到的最简单的方法是将多个 mixin 与警卫一起使用。 免责声明：我不建议将这种方法用于媒体查询。

.test {
    .example(red; orange; yellow; green; blue);
}

.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when (iscolor(@xl)) {
    @media (min-width: 1200px) {
        background-color: @xl;
    }
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@lg)) {
    @media (min-width: 800px) and (max-width: 1199px) {
        background-color: @lg;
    }
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@med)) {
    @media (min-width: 600px) and (max-width: 799px) {
        background-color: @med;
    }
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@sm)) {
    @media (min-width: 400px) and (max-width: 588px) {
        background-color: @sm;
    }
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@xs)) {
    @media (max-width: 399px) {
        background-color: @xs;
    }
}

在此示例中，将根据调用 mixin 时包含的参数来应用每个部分。

---

处理媒体查询的更好解决方案是为使用的各种断点声明一些变量。

我经常有一组变量声明，如下所示：

@extra-small: ~"                        (max-width:  479px)";
@small:       ~"(min-width:  480px) and (max-width:  767px)";
@medium:      ~"(min-width:  768px) and (max-width: 1023px)";
@large:       ~"(min-width: 1024px) and (max-width: 1199px)";
@extra-large: ~"(min-width: 1200px)                        ";

_{有时我使用@small: @small-begin and @small-end 进一步分解这些，其中@small-begin 和@small-end 是单独的min-width 和max-width 声明。}

这些变量可以用作：

.test {
  background-color: blue;

  @media @small {
    background-color: green;
  }
  @media @medium {
    background-color: yellow;
  }
  @media @large {
    background-color: orange;
  }
  @media @extra-large {
    background-color: red;
  }
}

这种格式的优点是您只需要在断点之间更改的媒体查询中指定样式。您还可以在每个断点内添加多个样式，从而减少输出中重复媒体查询声明的数量。