前言

本章介绍什么是less，如何在微信开发者工具中使用less。

一、为什么使用less？

1、css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

2、Less

是一个CSS预处理器，CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，可以说Less 是一个CSS 预处理语言，Less有以下特点：
Less扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less可以为网站启用可自定义，可管理和可重用的样式表。
Less是一种动态样式表语言，扩展了CSS的功能。
Less也是跨浏览器友好。

3、通过示例来说下Less的使用：

（1）变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
less源码

@color: #4D926F;
#header {color: @color;
}
h2 {color: @color;
}

less编译后

#header {color: #4D926F;
}
h2 {color: #4D926F;
}

（2）混合（Mixins）：混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
less源码

.rounded-corners (@radius: 5px) {     //泪如雨下啊：有了这个函数，以后再也不用每个样式里面写那么多兼容了，每次调用时只要传入一个参数.rounded-corners(8px)   .rounded-corners(10px)-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;-o-border-radius: @radius;border-radius: @radius;
}#header {.rounded-corners;
}
#footer {.rounded-corners(10px);
}

css源码

#header {-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;
}
#footer {-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
}

二、微信开发者工具集成less

1.安装插件

Easy LESS 是在vscode中处理less的插件
1）如果没有安装 vsCode工具可以通过一下地址下载此插件

2）将下载地插件解压缩，放到目录下：
C:\Users\Administrator\AppData\Local\微信开发者工具\User Data\9259feccd0504e07222e7b591863de6\Default\Editor\User\extensions

安装插件
打开微信开发者工具，设置>扩展设置>

打开扩展编辑器后，点击>从已解包的扩展文件夹安装

安装成功后进行配置，打开设置>Extension Settings

打开setting.json进行全局配置

添加如下代码，可以将less自动转换为微信小程序识别的wxss文件：

2.使用插件

在page文件下新建 .less文件，输入css代码后保存，page文件下会自动生成对应的wxss文件

微信开发者工具使用less相关推荐

使用微信开发者工具创建小程序项目
个人资源与分享网站:http://xiaocaoshare.com/ 1.微信开发者工具自行到网上下载即可 2.打开微信开发者工具,如图所示: 点击创建后,如下图所示: #### 项目结构 ``` └ ...
uni-app启动微信开发者工具
运行uni-app在微信开发者工具下注意的问题: (1)在点击工具栏里的文件 -> 新建 -> 项目: (2)选择uni-app,输入工程名,如:hello-uniapp,点击创建,即可成 ...
微信开发者工具出现 Error:unable to verify the first cert？
微信开发者工具出现 Error:unable to verify the first cert? 不知道什么原因突然遇到这个问题,网上搜索了好多方案都无效,官方也没有指定有效的方案或者问题原因.奇了 ...
微信开发者工具一打开代码编辑区文件全部不见了
今天开微信开发者工具时,一打开竟然文件全部不见了!然后页面也编译不出来,搜了一下大神们的建议: 1.在编辑器控制台输入:openVendor 回车会打开一个文件夹:C:\Use ...
Linux安装微信开发者工具(deepin linux ubt)
一.环境:: deepin linux15.4.1 二.安装过程: 2.1 安装wine sudo apt-get install wine 2.2 安装nwjs-sdk 2.2.1 下载linux版 ...
Linux微信运行错误,Ubuntu 16.04 运行微信开发者工具编译出错的解决办法
最近有折腾小程序的意向,但微信的开发者工具只提供了 Windows 和 Mac 两个版本,对于我这样的 Linux 用户来说不是那么地友好. 经过观察发现,那个开发者工具实际上是基于nw.js开发的, ...
微信开发者工具 wxmi修改模版颜色_网站建设公司讲解：微信小程序的开发者工具界面...
网站建设公司深圳市博纳网络信息技术有限公司()讲解:微信小程序的开发者工具界面创建项目后,进入到微信开发者工具界面,界面大致可以分为6个区域:①菜单栏区域,②模拟器.编辑器.调试器显示与隐藏区域,③ ...
运行项目到微信开发者工具和浏览器
文章目录一.运行项目到微信开发者工具 1. 下载安装 2. HBuilder X配置 3. 设置[微信开发工具路径] 4. 运行 5. 运行到浏览器一.运行项目到微信开发者工具 1. 下载安装 ...
微信开发者工具：Failed to load font ************** net::ERR_CONNECTION_RESET问题解决办法
如果微信开发者工具前几天用的好好的突然出现 VM541:1 Failed to load font https://img.yzcdn.cn/vant/vant-icon-d3825a.ttf net ...
微信开发者工具中导入错误提示请选择含app.json/project.config.json的目录（纪录篇）
是因为每一次 npm run dev:mp-weixin 时都在编译dist/dev下的文件所以在选择目录之前,要先找到自己创建的项目中的app.json文件,然后选择app.json文件的上级目录 ...

微信开发者工具使用less

文章目录

前言