less（css预处理器）进行加减乘除运算，在编译成css时，css文件中显示的是运算公式，而不是运算结果？

今天学习了css预处理器中的less语法，在敲代码的过程中，发现了一个问题，编译之后的css文件中，less文件中的运算公式，在css中还是显示运算公式，不是运算结果。我开始以为是本应该是这样，但是当运行HTML时候，他会报错：属性值不可用，经过查找，终于找到了解决办法。

首先，我是通过vscode 插件自动生成的css文件，方法如下：

1.在vscode插件库，安装easy less，该插件，会在保存less文件的时候，自动生成css文件。

2.看了黑马程序员pink老师的视频课 ，看跟着一起敲代码。

在.less其中height的值是一个运算式子

@baseFont:50;
.search-content {
    display: flex;
    position: fixed;
    width: 15rem;
    height:88rem / @baseFont;
    background-color: #FFC001;
}

下面是生成的css中的代码

.search-content {
    display: flex;
    position: fixed;
    width: 15rem;
    height: 88rem / 50;
    background-color: #FFC001;
}

运行.html文件，应该出现的样式没有显示，检查元素发现该属性值是无效的。

遇到问题就要解决呀，百度了一堆，最后终于是找到了解决办法。原来pink老师的代码是2018年的，现在是2021年，代码“更新换代”了。解决方法如下：

height:(88rem / @baseFont);

加上括号就完美解决啦。

 

 

希望我的方法对你有用。前端小白们，加油写代码，天天敲代码吧。