less中使用js

首先，常规的使用

1. 比如，在css通过js获取高度。参数的话，没有尝试在css传递参数，在js页面处理就好了

@height: `getHeight`;

2. 比如，在css获取js里面的变量

@height: `xxx`;

现在，介绍一下遇到的问题：

因为要做菜单栏，可以收缩的那种。如下图：


希望在css里调用js,通过calc动态修改宽度，但是，在使用的时候遇到了问题。

问题描述

在css获取js变量，或者方法时，比如：返回的35px，在页面渲染的时候，都是加了双引号的。导致页面渲染失败。比如：width: “35px”; 或者不带px，在css里面另外加。一样不行。

解决办法

试了小半天不行，后来是用js实现的，但是发现有点问题，然后有点麻烦。所以就接着研究这个了。
办法如下：
首先，js信息：

// 菜单栏 var menuBar = new Object({ // 打开的宽度 openWidth: "180px", // 关闭的宽度 closeWidth: "35px" }); 

 

然后是css信息：

// 获取js参数
@menuBar:`menuBar.closeWidth`; // 左边宽度 @left-Width: calc(~"0px + @{menuBar}"); 

 

使用的地方：

width: @left-Width;

这样，css获取到的就是js中的参数了。