less可以让css支持变量，这样在写css的时候就拥有了更多的可能性，可以把相同的颜色、字号等放在一个变量中，然后再去引用变量，这样可以有效提高代码的可维护性和可复用性。在HTML网页切图的时候，以下是在HTML中使用Less的步骤，非常简单，不依赖复杂的集成环境。

总共可分为3部曲：

1. 引入Less文件

在HTML文件中，使用<link>标签引入Less文件，如下所示：

<link rel="stylesheet/less" type="text/css" href="styles.less">

2. 引入Less.js

在页面的底部引入Less.js文件，如下所示：

<script src="less.min.js"></script>

3. 编写Less代码

在styles.less中编写Less代码，例如：

@font-size: 16px;
h1 {
font-size: @font-size;
background: red;
}

注意，在Less中使用变量需要使用@符号来声明。

Less原理

当网页加载时，Less.js会将styles.less文件编译为CSS，并将其替换为<link>标签的href属性中的CSS文件。使用less的情境也比较多，比如切图网最近的wepy小程序项目开发中，因为wepy最终打包生成微信小程序，而小程序本身支持less语法，所以在做切图的时候也可以使用less来提高代码效率。

标签：css, LESS, wepy, 小程序