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

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

使用VSCode

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

一、在vscode中搜索 Easy LESS

二、在Settings中打开openSettings

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

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

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

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


新建less文件

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


自定义样式变量
引用less变量

你可能感兴趣的:(小程序开发使用less文件进行布局)