开发者学堂课程【移动 Web 前端开发：less-项目结构】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8493
less-项目结构
内容介绍
一、less 的使用
二、使用 less 开发项目
一、less 的使用
通过制作苏宁首页来讲解，所以需要建立 less、css、images、js、assets（存放第三方资源或依赖库）文件夹，再新建 index.html。
需要解决的第一个问题就是测试的问题，使用 less 开发项目 less 需要编译后才能使用，因为有 webstrom 才能让 less 在浏览器运行，但是没有 webstrom 的话达到自动化编译该如何让 less 在浏览器使用。
如果不能使用，会很麻烦会非常不方便，现在配置了可以直接使用 CSS 文件，因为写完就会生成 CSS 文件，写完浏览器刷新就可以看到。
有的时候，编译器并没有配置自动化编译过程，但是也想使用 less，在浏览器上使用怎么办呢。
接下来怎么直接在浏览器使用 less，要依赖与计算机里面的 less.js 压缩包的插件，一个让 less 直接运行在浏览器的插件，才能让 less 在浏览器直接运行解析。
这里不用也可以，用编译过后的 CSS 也可以。这里主要说说明没有自动化编译过程手动去编译再引入js会很麻烦，但有一种测试方案直接去引用 less 就行。
新建一个 test.less,这时候提示添加 watcher，加不加都无所谓，因为有less插件帮助在浏览器运行，写完后自动编译，
内容如下：
@charset “utf-8”;
body{
background:pink;
}
如果此时能用 less 文件，body 就会变为 pink，再在 index.html 中 link 引入 less下的 test 文件，如下
<html>
<head lang=”en”>
less"/>
<body>
</body>
</html>
浏览器运行后发现没有变化，说明使用不成功。虽然说当前文件已经加载过来了，但是 test.less 里面是空的，提示浏览器识别不了这个文件，但是使用 less 插件就可以让 test 文件运行在浏览器端，index.html 代码如下：
…
less"/>
l</span></code><code><span class="lake-fontsize-1515">ess/less.min.js">
…
此时浏览器刷新再次运行还是不成功，还需要做一些配置，可以在 link 中加入type=text/css，与以前的 css 类型 type/css 不同，script 的 type 是“text/javascript”，其实在这里每个标签都是有类型的，只是 h5 之后可以省略，但是如果要使用 less 文件就要加上 type，更改 index.html 代 码如下：
…
type=“text/less”href= "less/test.less"/>
l</span></code><code><span class="lake-fontsize-1515">ess/less.min.js">
…
此时再次刷新运行，观察效果发现背景变为了粉色，如图：
只要指定了 less 类 型背景就生效了。具体怎么生效的可以从 head 中看到，type=“text/css”中的代码已经是 less 文件编译过后的代码，如果再在 test.less 中追加代码为：
@charset “utf-8”;
@color：pink；
body{
background:@color;
}
浏览器运行后发现并没有变化，说明只是把less文件解析了一下，并没有追加到html 文档当中。
观察以上代码在浏览器运行结果可以发现对于less文件在浏览器解析过程为：
1.和 css 引入一样引入 less 文件。
2.在 less 中加入一个属性 type="text/less"。
3.在less引入的下面引入 less.js 插件解析 less 的插件。
4. lessjs 会把 less 的内容加载过来。
5.解析成 css 字符串，然后追加到 head 当中，增加在 style 标签当中。
6.本质在浏览器运行的还是 css，只不过 less 解析了一遍。
二、使用 less 开发项目
通过以上过程可以直接使用 less，每个项目里面都会有变量 variables 提前声明，新建 variables.less 管理变量，mixins.less 定义方法，adapter 适配方案，model.less 各个模块，main.less 主体文件，所有文件都应该在 main 中适用。
模块都要在主体中集成，所以在 main.less 里引入，variables 定义变量，mixins 定义方法，adapter 定义适配方案，model 定义所有的模块，如下：
…
@charset "utf-8";
@import "variables";
@import”mixins";
@import”adapter";
@import"model”;
…
最终 index.less 中引入 main 和 less 插件就足够了，通过 link 引入 less 下面的main.less，再通过 script 引入 accets 资源当中的 less，再下面的 less.min.js 解析插件，如下：
…
/引入main.less
//引入less解析插件
…
最后在 model.lass 中写入所有模块和样式：
body{
background:red;
}
最终运行：
