在媒体查询中使用较少的 mixin答案

【问题标题】：using less mixin inside of media query在媒体查询中使用较少的 mixin
【发布时间】：2015-11-04 23:37:32
【问题描述】：

是否可以有不同的 mixin 取决于宽度？如何让它发挥作用？

例如

.fs (@weight: 300, @size: 2vw, @color: black) {
@size2: @size/10.2; 
font-family: 'Lato', sans-serif;
font-weight: @weight;
font-size: unit(@size2,vw);
color: @color;
}


@media screen and (min-width: 1024px){
.fs (@weight: 300, @size: 10px, @color: black) {

font-family: 'Lato', sans-serif;
font-weight: @weight;
font-size: unit(@size,px)!important;
color: @color;
}
}

谢谢

【问题讨论】：

您在编写 mixin 方面似乎走在了正确的轨道上，但我不确定为什么您在媒体查询中覆盖 mixin，而您可以使用不同的 size 属性调用它。您也可以将单元作为参数本身的一部分传递，从而避免unit()。
当您在@media 查询中规划您的Less 代码时，重要的是要意识到何时这些媒体查询实际被评估并生效。参见例如stackoverflow.com/a/14391323/2712740。所以是的，你可以对同名的 mixin 有不同的定义（你可以在 anywhere 有这些），但是你对它如何工作的期望很可能与它实际如何工作不同。在您指定您要解决的实际问题之前，很难更具体（而不是询问您认为解决问题的方法是否可行）。
即见XY-Problem。
我想让 px 或 vw 单位取决于窗口宽度。如果窗口宽度小于 1024px > 使用 px 单位...

标签： css less less-mixins

【解决方案1】：

我想要 px 或 vw 单位取决于窗口宽度。如果窗口宽度小于1024px，则使用 px 单位。

不，在媒体查询中覆盖 mixin 实际上对您没有帮助（因为这种覆盖只影响相同的媒体查询块，并且对其中的任何 mixin 调用没有影响）。

实现你需要的最简单的方法实际上是将相应的@media查询放入 mixin本身：

// impl.:

.fs(@weight: 300, @size: 2, @color: black) {
    font-family: 'Lato', sans-serif;
    font-weight: @weight;
    color: @color;
    font-size: 1vw / 10.2 * @size;

    // this is obviously to be further abstracted 
    // (for example like in http://lesscss.org/features/#detached-rulesets-feature)
    @media screen and (min-width: 1024px) {
        font-size: 1px * @size;
    }
}

// usage:

div {
    .fs(400, 3);
}

span {
    .fs(700, 5);
}

还有其他方法（有些可能比上面更好，但这完全取决于您将如何使用 .fs mixin）。

【讨论】：

以防万一，在上面的示例中，我没有考虑“如果窗口宽度小于 1024px，则使用 px 单位”。媒体查询实际上应该使用max-width: 1024px。所以我把它留在 Q 中。
非常感谢！为我做这件事的最好方法！