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中的參數了。