webstorm | 编译 Less 保存自动生成 wxssacsscss

html-css017

webstorm | 编译 Less 保存自动生成 wxssacsscss,第1张

因为感觉用 微信开发者工具 开发很不习惯,所以都是用 WebStorm 来开发,再用 微信开发者工具 预览。本文主要记录一下利用webstorm编译less

配置方案

1、配置在当前目录生成.wxss

2、less独立文件夹,生成 .wxss 文件到指定的目录中

1、配置在当前目录生成.wxss

2、less独立文件夹,生成 .wxss 文件到指定的目录中

和微信步骤一样,只是后缀不同

路径 File | Settings | Tools | File Watchers | +

点加号,选择less, 弹出下面的窗口,已经有默认配置了,点ok即可

我们在写样式的时候,可能一个app内的颜色,比如#00ff00,假设这个颜色我用了100次,穿插写在不同的页面里。当需要修改这个主题的时候,会让人抓狂。

所以我们可以使用变量来优化。

在html, css里面,它原始的定义方式及使用方法是这样的

其中,:root是根元素选择器,也就是<html>元素。在这里面定义的变量,可以在整个页面进行使用。

使用的时候,用var()函数进行调用。

注意:约定变量名须以两个连字符'--'开头

小程序中,用法基本也是一样的:

我们在wxss页面中进行定义

注意,page选择器是选中整个页面,前面是没有'.'号的。这是wxss系统自带的选择器。可以看到,用法和css原始用法差别不大。

你也可以在wxml里面直接使用!

这个wxss变量,既可以在每个页面mypage.wxss里面的page里声明,

,就能在所有页面里使用。