LESS IS MORE

学习完css部分，相信你们对经过css进行DOM元素的样式操做已经很是熟悉，也能够经过css的语法进行页面显示效果的添加和修改。若是大家对css报以崇高敬意，感受它拯救了你的整个网页的话，其实你正在犯一个错误。

在你熟练使用css进行页面效果操做的时候，具备编程思惟的“CSS预处理”语言正在悄然出现。能够说，它从某种层度上颠覆了原始样式编写，并逐渐被各大型网络公司及前段框架所使用。为何它会有这么大的魔力，它们都是谁？从这章文档开始，我给你们介绍一下相关的知识，也就是大家要学习的LESS和SASS。

先来讲一下为何会出现LESS、SASS。难道是css不够优秀了吗？不是。其实在程序员眼里，css没有编程的语言的思惟。没有变量，没有分支及循环等编程语言最基本的特色，使用css就是在一行一行的在对你的样式进行描述，写起来至关费劲，因此开始被程序员嫌弃。很天然的，有人开始为css加入编程的元素，这被叫作“CSS预处理器”，它的基本思想是：用一种专门的编程语言，进行网页样式的设计，而后再经过相关的方法或者是工具编译成css文件，被项目正常使用。

LESS是一种动态样式语言，属于css预处理语言的一种，它使用相似css的语法，为css赋予了动态语言的特性，如变量、继承、运算、函数等，更方便css的编写和维护。而且LESS能够在 多种语言和环境在使用，包括浏览器端、桌面应用端、服务器端。

编写的LESS文件不能被浏览器直接使用，须要把LESS文件编译成css文件。方法不少，最简单的方法是经过集成工具处理，比较好用的一个工具就是：klola。工具的下载地址为：http://koala-app.com/index-zh.html。你们能够先去下载并安装。安装成功之后运行效果为：

在讲具体语法以前先给你们说一下注释，相比css，less文件编译成css文件的时候，有一个特色，经过/**/添加的注释会被编译到css文件中，可是经过//添加的注释则不会。讲完注释，我们看一下和语法规则相关的部分。

1变量

LESS中容许使用变量，经过变量，能够定义在样式中频繁使用的数据。而后在须要使用该数据的的时候直接调用变量名称便可。LESS中定义变量的语法很简单：@变量名称。使用的时候也是在样式属性后直接追加变量。示例以下：

2Mixins

Mixins能够实现将一个定义好的样式类A直接引入到另一个样式类B中。从而实现让样式类B继承样式类A中的全部样式属性。定义样式类的方法和定义一个函数格式相似，而且能够定义形参来接受参数。示例以下：

 

3LESS运算

LESS中提供了相似运算的算术操做,其中包括加、减、乘、除等。经过运算符，咱们能够实现属性值或者颜色的运算，这样能够实现属性值之间的复杂关系。示例以下：

4LESS嵌套

在学习css的过程当中，我们学习了各类跟层级关系相关的选择器，好比，后代选择器、子代选择器、相邻选择器、通用兄弟选择器等等。在LESS里，不须要去记忆大量的选择器。由于，全部的层级关系均可以经过css的嵌套来实现。示例以下：

 

经过对比LESS的层级和HTML的层级，你们不难发现其中的关系，HTML中的嵌套关系彻底能够LESS中模拟。这样能够省去了编写css层级选择器的麻烦。这里还有一个符号须要给你们说一下，那就是&符号，&表示上一级选择器。在这段代码里，表示给a标签添加hover伪类。

上面内容给你们介绍了LESS的由来及几个比较重要的语法。到目前为止我们尚未作LESS的编译。下一个章节，我会给你们介绍LESS工具编译，命令行编译及开发工具编译配置等多种办法，帮助你将less文件转换成css文件。