css - 更少的 CSS 混入 : how can i hide styles when variable is a specific value?

Question

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

这是有效的(断点是假的，~"" 代码是默认告诉 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

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

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

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

---

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

我经常有一组变量声明:

@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 和 @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;
  }
}

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