LESS是什么？它是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

总结一点就是可编程化的CSS。但是在实际的开发过程中你又是怎么去用的呢？

假如你使用LESS，但是你像过去那样写CSS的方式去用的话，那你可以细读一下本文。

分组

先说说我们是怎么对LESS进行分组的。来看一下基本的目录结构：

css
├── lib/
├── mods/
├── i/
├── base.less
└── other.less

lib

lib目录是存放less公共方法的地方，有：

1. mixin.less：这个用的是bootstrap的公共库，定义了一系列的公共方法函数。
2. var.less：这个是全局的函数变量，比如，我们会放一些设计规范中的颜色值，背景值，按钮颜色值，公用的宽度等等。
3. fn.less：用于自定义的公共方法函数。

mods目录

mods目录存放的是单个页面的样式，每个less文件都对应一个页面的样式。

当然，里面会有一些公共的部分：

1. reset.less：用于样式的重置
2. public.less：用于存放公共组件库样式。
3. common.less：用于存放通用的样式，比如头尾样式。

i目录

i目录是用来存放css中的图片的地方。

LESS文件

最后重点要谈到的就是后面的xx.less文件。

有了上面的结构后，less文件只是一个入口，用来引入你需要的样式文件。

更合理的理解就是它是一个组装的工厂，你需要什么就直接拼装一下就成了一个css文件。

但是都必须引入，lib目录下的所有文件。

这样一来就凸显出了LESS的灵活应用。

其他优点

less可以保证，如果文件内容结构不修改，每次生成的文件内容不变。

这样一来，就保证了每次文件的md5值一致，在上线计算版本号时，可以保持不变。

总结

总结一点，就是我们是在用模块化开发的思想使用LESS。