Less.js: 当变量用于子媒体查询时，无效的嵌套媒体查询与“或”条件合并

创建于 2016-09-20 · 5评论 · 资料来源: less/less.js

当使用包含带有 OR 条件（逗号或“或”关键字）的媒体查询定义的变量时，将编译无效媒体查询。顶级媒体查询应该放在每个子查询之前。

较少的：

<strong i="7">@highdpi</strong>: ~"(-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx)";
.bg {
    <strong i="8">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        <strong i="9">@media</strong> <strong i="10">@highdpi</strong> {
            background: url([email protected]);
        }
    }
}

输出：

<strong i="14">@media</strong> (max-width: 1000px) {
  .bg {
    background: url(bg-small.png);
  }
}
<strong i="15">@media</strong> (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {
  .bg {
    background: url([email protected]);
  }
}

预期输出 - 每个逗号分隔部分之前的“（最大宽度：1000px）和”：

[...]
<strong i="19">@media</strong> (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 1000px) and (min-device-pixel-ratio: 1.25), (max-width: 1000px) and (min-resolution: 1.25dppx) {
[...]

_另一方面，它编译得很好，当不使用变量时：_

.bg {
    <strong i="23">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        <strong i="24">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {
            background: url([email protected]);
        }
    }
}

consider closing feature request needs decision stale

资料来源

falkenhawk

👍2

最有用的评论

这与其说是一个错误，不如说是一个功能请求。 Less 不应该理解那些~"" （任何地方，不仅仅是媒体查询）。因此，Less 应该永远不会知道那里有任何逗号或其他特殊符号。

从技术上讲，像上面这样的代码（“转义字符串中的媒体查询列表”）更像是一个旧的怪癖/语法解决方法，而不是被认为是正确的代码（再次因为~""本身）。在今天的 Less 中，实现相同内容的正确模式是使用匿名/分离的规则集/混合而不是“魔法值变量”，例如：

.highdpi(@rules) {
    <strong i="10">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), 
           (min-device-pixel-ratio: 1.25), 
           (min-resolution: 1.25dppx) {
        @rules();
    }
}

.bg {
    <strong i="11">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        .highdpi({
            background: url([email protected]);
        });
    }
}

或类似的方法。

与#1421 和类似问题/请求相关。

请注意，即使作为功能请求（如果提出），该功能也必须使用不同的语法而不是~""无论如何，即该示例永远不应该按预期工作 - 所以我没有将其标记为“功能请求”（因为 FR 需要更多的洞察力）。

也许合并到#1421？

seven-phases-max 于 2016-09-20

👍3

所有5条评论

.highdpi(@rules) {
    <strong i="10">@media</strong> (-webkit-min-device-pixel-ratio: 1.25), 
           (min-device-pixel-ratio: 1.25), 
           (min-resolution: 1.25dppx) {
        @rules();
    }
}

.bg {
    <strong i="11">@media</strong> (max-width: 1000px) {
        background: url(bg-small.png);

        .highdpi({
            background: url([email protected]);
        });
    }
}

或类似的方法。

与#1421 和类似问题/请求相关。

也许合并到#1421？

seven-phases-max 于 2016-09-20

👍3

@seven-phases-max 感谢您解决这个问题。我将更改我的 mixin 以使用另一个“.highdpi”mixin，而不是带有转义字符串的变量。

falkenhawk 于 2016-09-21

@seven-phases-max 我认为这里有两个单独的问题/功能请求，所以不确定我们是否应该合并到 #1421 而不指定它们。

允许 Less 解析器对表达式和列表更加宽松。例如，允许列表由媒体查询值或选择器组成。因此，当想要使媒体查询成为变量时，字符串转义不一定是必需的。（这是一个常见的需求。）这是#1421，@ media示例可能只是添加到该问题的其他内容。
合并嵌套媒体查询值的列表（取决于#1 ，但应该与#1分开通过/失败。虽然这样做了#1 ， #2是合乎逻辑的下一步。所以，我认为我们可以在 #2964 中跟踪它。

matthew-dean 于 2016-11-07

在这里引用 #3059，因为本质上它几乎是相同的问题。即基本上问题是：“在变量替换为其值@media和@supports查询等的全功能重新解析？” （这要么需要对解析器本身进行重大重构，以便它可以在任意时刻用于任意字符串，或者在每个特定节点及其 eval/css-gen 函数中复制解析代码）。

seven-phases-max 于 2017-05-23

此问题已自动标记为陈旧，因为它最近没有活动。如果没有进一步的活动发生，它将被关闭。感谢你的贡献。

stale[bot] 于 2017-11-14

此页面是否有帮助？

0 / 5 - 0 等级

Less.js: 当变量用于子媒体查询时，无效的嵌套媒体查询与“或”条件合并

最有用的评论

所有5条评论

相关问题