Question

我遇到以下代码的问题：

@viewport-large: 1440px;
@viewport-medium: 1366px;
@viewport-small: 1280px;

@type: medium;
@setting: ~"@{viewport-@{type}}";
@value: (@setting + 1); // here can't add 1

它将在LESS编译器中显示错误消息：＆＃34;对无效类型的操作＆＃34;。

谁能告诉我为什么会这样呢？我该怎么办？

Answer 1

Less＆＃39;的输出CSS escape function（e()或~""）是 字符串 ，您无法为其添加数字。这就是编译器报告 无效类型操作 。

的原因

所以，不要这样做，而是使用双重分辨率（@@），如下面的代码块所示：

@viewport-large: 1440px;
@viewport-medium: 1366px;
@viewport-small: 1280px;

@type: medium;
@setting: "viewport-@{type}"; /* this won't resolve into 1336px as yet */
@value: @@setting + 1px; /* resolution to 1336px + addition happens here */

在这种方法中，我们只需要形成变量名称并将其设置为@setting变量（而不是设置实际的px值），因此真正的px值的类型仍为 无污染 即可。在我们使用double @的下一行中，Less编译器会尝试获取由名称与@setting变量的值相同的变量保存的值，并立即将1px加到它上面将其转换为String。

注意：如果您启用了严格数学选项（--strict-math），则必须将添加操作包含在如下所示的额外括号内。否则，它会明显输出一个连接值，如 1366px + 1px ，而不是执行添加和输出1367px。

@value: (@@setting + 1px);

默认情况下会禁用--strict-math设置，但您的某些项目可能已启用它。

如何添加/ sub到动态变量？

1 个答案: