今天学习了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);
加上括号就完美解决啦。
希望我的方法对你有用。前端小白们,加油写代码,天天敲代码吧。