less编译方案

lesscss 是一种动态样式语言，属于css预处理语言的一种，他是用类似css的语法，为css赋予了 动态语言的的特性，如变量，继承，运算，函数等更方便css的编写和维护，简单来说，他自定义了一套语法规则，在css中提供公共变量的抽取 ，简单的函数运算等功能，最终通过编译器或解析器将其编译或解析为相对应的代码。

但是less文件在何时编译成为一个值得关注的问题，按照常规you几种方案：

1.前端人员手工将less文件编译为css，并在页面引入css文件

2，引入less文件，项目编译时使用插件统一进行预编译

该方案要求所有开发者都要安装编译环境（node和less），多人编辑一个文件时很容易出错，并全额多版本并和时代码不方便，一点点细微的的改动都要重新编译文件

3.页面引用less文件和js解析文件，在页面上将less解析成css

对于互联网项目来说，这种方式基本不会考虑在运营，执行效率太低。

less的两种编译方式：

1，引入less代码

<link rel="stylesheet/less" href="example.less" />

然后引入解析代码：

<script src="lesscss-1.4.0.min.js"></script>

好处：不必安装less编译环境，同时可以使用less文件

缺点：在页面上解析代码，效率太低，受机器，网络影响较大。

2，服务端编译“：

官方提供了基于node.的编译工具 lessc

首先全局安装less

然后直接使用ess编译即可

 

优点:服务端编译，效率高，避免客户端解析延时

缺点：需要安装node以及less环境，每次修改后less后都需要将其编译成css文件方可见效。

方案基本思路：

基于上述原因，即开发环境使用1，不用所有的后台成员安装环境，降低开发成本，避免每次修改

都编译。

其他环境使用方式2，预编译less文件，提高页面加载速度。

 

总结：

任何工具都不应该拿过来直接用，通过合适的定制使其更加合适自身项目开发。

转载于:https://my.oschina.net/u/3739998/blog/1584959