使用 2 个 Css LESS 变量并从另一个中减去一个答案

【问题标题】：Use 2 Css LESS variables and subtract one from the other使用 2 个 Css LESS 变量并从另一个中减去一个
【发布时间】：2015-02-11 12:41:40
【问题描述】：

在less中，我有以下内容：

@divwidth: 425px;
@docwidth: '$(window).width()';

我想将左侧样式设置为此结果：

left: ((@docwidth - @divwidth + 1)/2)!important;

我使用 +1 以防我得到 0 并尝试将其除以 2

我似乎无法获得正确的值，也无法确定我是否做得对。我试过了

left: ~'((docwidth - divwidth + 1) / 2)px' !important;
left: ~'calc((docwidth - divwidth + 1) / 2)px' !important;

仍然没有喜悦。我会很感激一些帮助或一个很好的资源来解决这个问题......

【问题讨论】：

从未见过有人在 LESS 中使用 Javascript... 你确定它受支持吗？据我所知，LESS 是静态转换成 CSS 的，所以我认为这行不通。
查看文档，没有提及使用 Javascript 表达式，显然您的想法仅靠 LESS 是不可能的。但是既然可以用Javascript，为什么不全部用JS呢？
可能你应该解释你想要达到的目标，为你的问题找到更好的解决方案
您可能需要的是 "viewport units" 之类的东西。通过在您的 Less 代码中使用 $(window).width()，您真的是在自找麻烦（+100 到 Bass Jobsen 答案如下）。

【解决方案1】：

是的，您可以在您的 Less 代码中使用 JavaScript 评估。 JavaScript 代码应放在反引号 @docwidth: "`$(window).width()`"; 之间，示例参见 https://stackoverflow.com/a/19386571/1596547。

不推荐在 Less 中使用 JavaScript，因为替代编译器（不是用 JavaScript 编写的）无法编译您的代码。

还要注意$(window).width() 仅在使用the client side compiler 时才有意义，即便如此，您也应该在调整窗口大小后重新编译代码（调用less.refreshStyles()）。

在大多数情况下，您使用 less 来编译静态 CSS 代码。静态 CSS 代码不会更改/响应环境属性，例如 $(window).width()。

【讨论】：