小程序中使用less
时间:2022-07-28
本文章向大家介绍小程序中使用less,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
写惯了 less/sass
,但是现在开发小程序缺还是 css
,很不习惯。 在网上搜的教程,要么是 gulp,要么就是 vscode 的 Easy-less
的插件。
#传统方式
我们来对比,这两种方式的优劣。
Gulp
前者要对于 gulp
有简单的了解,但是现在大道其行的 webpack
来说,gulp
用的人也越来越少,而且具有一定的学习成本,但好在自定义程度较高,自己可以随便添加take。
VScodd的Esay-less插件
啥都不说,挺香的,直接在 vscode
安装 easy-less
插件,然后 seting.json
,就可以愉快的使用less
了
保存一下就可以在同目录生成 .wxss
文件,缺点是必须在vscode中使用,也就是说你在开发中要打开俩个编辑器,一遍使用vscode
写less
,一边使用微信开发者工具看预览.....emmmmm,画面太美不敢想象
#新的方式
偶然,在网上看到 你想在小程序里使用less嘛? (VScode版) 里有人放出一张截图
直接在微信开发者工具里使用的 Easy-less
,功能和在vscode
里使用的一样,
惊为天人的我感觉跑去官方文档去看,原来微信开发者工具早在 1.03.2004271 版本之后就开始支持扩展工具了。
并且直接使用 vscode
的扩展就可以,很方便
经过自己一连串的操作,证明是可以的。
#步骤
- Vscode 安装 Easy-less
- 扩展文件夹 其解包后的文件夹可以在 ~/.vscode/extensions (macOS 系统) 或 C:Users用户名.vscodeextensions (Microsoft Windows 系统) 下找到
复制mrcrowl.easy-less-1.6.3
文件到微信开发者工具当中
- 粘贴扩展文件夹 打开微信开发者工具,top 栏,设置>扩展设置>扩展>自定义扩展 点击,“打开扩展文件夹”,然后会打开一个文件夹,粘贴到这里就行了。
- 设置输出.wxss 到这里还差最后一步,因为Easy-less,默认输出的css,但是小程序中要使用.wxss的文件,所以设置一下输出的文件后缀即可。
5. 重启微信开发者工具 设置成功后,关闭小程序在打开,然后在pages下随便找个页面新建一个,index.less
,写一点保存看看index.wxss,有没有发生变化
#最终效果
#参考:
- 手把手教你玩转 CSS3 3D 技术
- 64位系统使用Access 数据库文件的彻底解决方法
- TensorFlow强化学习入门(3)——构建仿真环境来进行强化学习
- 编程的智慧特点
- 【机器学习】机器学习大白话
- 回归分析技术|机器学习
- 用PHP蜘蛛做旅游数据分析
- 一秒找出用时间和随机数生成的上传文件名
- Java之集合的遍历与迭代器
- Java之字符串String,StringBuffer,StringBuilder
- JavaScript深入浅出补充——(一)数据类型,表达式和运算符
- Oracle数据库(一)概述、基础与简单操作
- Oracle数据库(二)常用关键字以及函数
- Oracle数据库(三)表操作,连接查询,分页
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 为什么 Linux 默认页大小是 “4KB”?
- Swift Module Interfaces
- Swift 的 MemoryLayout 是如何工作的(1)
- Redis - NoSQL 和 Jedis 入门
- cargo manifest规则使用介绍
- 小程序bindinput和bindblur赋值延迟问题解决
- 小程序监听屏幕滑动事件
- 使用GithubActions发布Vue网站到GithubPage
- 3.QOpenGLWidget-通过着色器来渲染渐变三角形
- 特斯拉大半夜「见鬼」!空无一人的路上,它却看见「幽灵」秒刹车
- .NET 异步详解
- 他被导师半夜敲门叫醒:你得诺贝尔奖了!还曾为5G频谱拍卖设计方案,担任谷歌IPO咨询顾问
- C#实现——十大排序算法之选择排序
- CSS高级技巧 CSS用户界面样式
- 从零开始针对 .NET 应用的 DevOps 运营实践 - 运行环境搭建