如何在页面中引入Less定义的样式并控制元素

1、第一步，想要使用less，需要到官网上下载less.js，然后在新建的页面中引入，如下图所示：

2、第二步，在HBuilderX工具中新建一个Less文件，并定义样式变量，如下图所示：

3、第三步，在对应的主体元素内，插入一个div标签并设置ID属性值，如下图所示：

4、第四步，保存代码并直接打开浏览器预览页面效果，结果出现了报错，如下图所示：

5、第五步，经过检查发现页面中不能直接使用less，需要先编译成css，页面引入css文件，如下图所示：

6、第六步，保存代码再次预览发现样式不起作用，于是修改引入css文件中的相关属性，再次预览可以看到效果，如下图所示：