开发者学堂课程【移动 Web 前端开发：less-导入】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8487
less-导入
内容介绍
一、 描述
二、 演示
三、总结
一、描述
新建一个 less，命名为 main，main 表示主体主路口。
在 main.less 中定义一个样式比如：
a{
color :@maincolor
这样的写法是没用的，因为没有定义。
在 variable.less 中只声明了变量，mixin.less 中只声明了函数，这样就把变量和函数分开了，因为一个系统中有成千上百个变量或者混入函数，在书写 js 可能会定义很多全局变量和全局方法。如果在
不同的 js 文件中都定义了全局变量，当同时引用这些 js 文件时
会出现全局变量被污染的情况。
Less 在书写时也可能出现这些问题。
为了避免出现以上情况，在 less 中，可以把所有的变量都定义在一个文件中，比如在 variable.less 中除了可以定义全局变量还可以定义合作伙伴的变量或者顶部通栏的变量。
全部定义在一个文件中避免变量冲突，全局污染，有利于更好的维护，在一个变量文件中可以维护很多模块的变量。Mixin 也是同样的道理。
在 partner.less 中有a{display：block},在 variable.less 中定义一个合作伙伴的变量 @pblock：block；在 partner.less 中调用，
a{
display：@pblock；
发现不能使用，因为两个文件没有联系。同样，在 main.less 中也没有用到 variable.less 的变量。
less 把模块划分的细致，有专门定义变量的模块，有专门定义方法的模块，有专门定义合作伙伴的模块，有专门定义顶部通栏的模块，这就是模块化。
比如新建一个 top.Bar.less ,这个模块既包含变量也包含函数，变量和函数定义在不同的两个文件中有利于更好地维护，一个文件专门维护合作伙伴，一个文件专门维护顶部通栏，使用一个文件维护更直观。
若要使相关文件产生关联可使用导入方法。Less 中，可以通过 @import 指令来导入外部文件。
二、演示
@import”variables”
//在 main.less 中导入所有的变量，默认导入的是 less 文件，不用加后缀名。
@import”mixin”//导入所有的方法，在 main 中可以使用。
@import”partner” //main相当于一个主体，主体中可能包含合作伙伴，顶部通栏，轮播图等等，相当于给 index 编写样式，应该包含这些模块，上面是需要依赖的变量和方法，这里是需要依赖的模块，
@import“topbar“//引入 main 中可能包含的模块。
编译完成后 main 中就包含了所有文件中的内容。
比如在 variable.less 中定义变量pblock：none；最终编译到 main 里，也是 none。
三、总结
less 划分了很多模块，有专门定义变量的模块，有专门定义方法的模块，还包括很多模块，比如合作伙伴模块，导航栏模块，轮播图模块。在 main 中引入变量，方法根据页面功能，引入需要的模块，比如首页有顶部通栏，其他页没有顶部通栏就可以不引入。
在main中把 @import”topBar”删除。
模块化相当于把 css 代码解耦，原本的样式之间的耦合度特别高，相互联系紧，通过这种 less 编写把一个页面所有的东西都模块化了
使它们没有联系，这也是软件开发中常用的思想：高内聚低耦合，模块内部紧凑，模块与模块之间联系少，根据不一样的模块组成不一样的东西。
