less中使用js

本文内容

本文介绍在集成了less后，如何在css中使用js，以及一些比较偏僻，不好解决的问题

参考资料

less api：https://www.bootcss.com/p/lesscss/ ps:如果网站打开，页面样式比较乱，这时候看一下浏览器右上角，看看是不是被拦截了。api里面其实已经很详细的介绍了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中的参数了。
完成！2019年9月12日17:11:34 今天周四，明天中秋节，不上班，下班了！O(∩_∩)O哈哈~