css预编译其器,CSS预处理器之——Less

Less，顾名思义，少，在我看来，它有着与jQuery一样的思想——Write Less,Do More，尽管实际上这两者是完全不同的两个东西。

Less是一个CSS预处理器，先不管人们为何这样命名，在用原生CSS写样式的时候，有时候有没有一种很繁琐的感觉？繁琐在哪呢？

你可能不知不觉写了很多重复性的样式，可能其中只有一小部分不一致，比如说这样：

或者说你可能需要很深层的嵌套设置样式，比如这样：

假设说你可能还要处理兼容，比如这样：

甚至说同样一个右内边距，但采用原生CSS，你不得不这样做：

相信你会崩溃的，是的，那有什么办法解决这样的问题呢？

答案就是CSS预处理器，诸如Less、Sass，它使用类似CSS的语法为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。我们这里先说说Less。

Less的功能很强大，我们先来看第一个遇到的问题：重复性样式。

这其实在原生CSS也有解决办法，那就是将公共部分抽取出来，用一个个类名来存，但就像Bootstrap一样会出现一个标签上N多个类名，实在不利于维护，那怎么办呢？看看下面的混合模式：

混合(Mixin)与嵌套:

看看这个编译后变成怎样的哈：

混合模式可以说是Less一个非常容易上手但却是很好用的特性，你会发现，你在一个类名的样式对里放了另一个类名，这在Less是允许的，而且父子关系的标签样式可以嵌套，你不必定义一个parent类名，又得设置一个.parent .children类，配合着编辑器的代码收起功能，你可以非常方便的定位。这样第二个问题是不是也顺带解决了？

再看第三个问题——兼容处理。

参数：

我们可以把其中的border-radius用参数化的方式抽出，放入一个公共Less，配合着Css3的模块化@import，比如变成这样：

然后呢，你会发现你写的样式变成这样：

而且后续的还能继续复用，很方便对吧？border-radius还可传入参数，比如传入3，自动变成3px，这就是Less相较于原生CSS强大太多的地方，它让CSS有了像JavaScript一样的动态灵魂。

参数另一个很强大的作用在于修改起来很方便，比如说，定义成常量的参数，像下面这样：

假如说你下面还有很多应用到红色或30的行高的，传统的方式你可能不得不一个个去改，是不是很累？而这里，你仅仅需要修改默认的@line-height的值就全部修改啦，是不是很好用？

这样参数还可以解决上面第四个问题，你可能不得不定义一堆从pr0、pr10...直到pr100，不累吗？而这里，你仅仅只需要：

后续需要多少直接传多少的参数即可，甚至你还不怕当项目的资源目录(比如图片)结构发生变化，你不再需要去一个个的修改图片的url，而仅仅需要修改定义的@url参数，就可以达到批量修改的目的，是不是很强大？？

函数

Less另一个强大的地方在于函数，它内置了类似于这样的函数写法，比如下面这一个，实际上就类似于JavaScript里的switch，非常神似对吧？也很强大对吧？让CSS看起来都不像CSS。

Less的函数还有很多，这里仅仅介绍了类switch写法。

计算

Less还有一个较强大的功能，那就是计算，其实由于最终都会转译成CSS，所以实际上还是常量，只不过是一种比较方便的写出相近的常量，比如颜色风格。

看看编译后是什么样的哈：

实际上因为最终转译的情况，它实际上是常量，是以基础数据为基础计算后返回过来的常量。

嗯，说了这么多，你可能会说，Less浏览器识别不了，我得转译，是的，这里的话推荐一个给大家，那就是logo为考拉的koala，它的界面是这样的：

好了，Less的相关介绍暂时到这，后续想到再来补充。期待后续的Sass吧= =