小程序开发使用less文件进行布局

如果熟悉前端的同学在使用小程序自带的wxss进行布局时,难免会产生多多少少的抵触心理,而less文件布局却是再熟悉不过的,所以本篇介绍如何集成less扩展。

使用VSCode

vscode中有非常多非常实用的扩展插件,对小程序的代码提示,快捷方式等都有不错的支持。

一、在vscode中搜索 Easy LESS

二、在Settings中打开openSettings

三、在配置文件中加入配置

配置文件
"less.compile": {
    "outExt": ".wxss"
},

这样就能愉快的使用less文件了。

新建less文件,编译完成之后保存将会自动生成wxss文件。


新建less文件

可以在less中定义变量,并在其他less文件中进行引用


自定义样式变量
引用less变量
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容