初步认识 LESS_html/css_WEB-ITnose

前几天讲过SASS，作为前端开发，想让css编程化，还可以选择LESS。拥有css基础的学员，想要学习LESS和SASS，都是轻而易举的事情。SASS我已经介绍过了，这里我再带大家初步认识一下LESS。

其实LESS跟SASS有很多一样的地方，其最大的特点就是可以将CSS编程化，不再是单纯的描述型语言，而是可以加入很多逻辑的算法在里面。让CSS的编写拥有更大的乐趣，而不再是枯燥无味的重复相同的工作。

LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码，在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了，例如 Twitter 提供的 bootstrap 库就使用了 LESS。总的来说LESS其实还是受SASS的影响进行开发的，但它们俩有一点不同，SASS是用ruby写的，而less是用javascript写的。由于LESS也是属于CSS，用于编写CSS代码，所以LESS延用了CSS的语法，用括号来包含其代码。LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。

客户端使用

客户端使用的方法非常简单，直接将LESS的源文件引入网页即可，但是需要引入less.js的编译文件。如下：

这里有两个注意点：

（1）less.js一定要在LESS源文件后面引入，否则无法正确的识别。

（2）LESS的link里面的rel属性值是stylesheet/less，CSS却是stylesheet。

服务器端使用

LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。

在项目开发初期，我们无论采用客户端还是服务器端的用法，我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中，LESS 提供了一个我们很熟悉的功能—import。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如：

@import “variables.less”;

.less 文件也可以省略后缀名，像这样：

@import “variables”;

引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。

使用编译生成的静态 CSS 文件

我们可以通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。

语法上也是非常简单的，与SASS基本类似，只不过SASS可以不需要括号，LESS需要像CSS一样添加括号。语法方面有如下几大特点：

一、变量

变量是一个极其方便的东西，像js一样，变量可以在全局样式中使用，变量使得样式修改起来更加简单。LESS 中的变量和其他编程语言一样，可以实现值的复用，既然是变量，就有局部变量和全局变量之分。局部变量和全局变量的区别，跟js中的局部变量和全局变量的区别是类似的。

二、混入

Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 class 中引入另外一个已经定义的class，就像在当前class中增加一个属性一样。

三、运算

运算功能是CSS所不具备的，但是LESS可以很方便实现运算。

四、函数

LESS也可以像js一样定义函数，通过调用所定义的函数来实现部分功能。

五、嵌套

嵌套跟SASS一样，对于区分模块非常好。

不知您有没有对LESS有一个初步的认识？如果您对LESS感兴趣，不懂也没关系，不要着急，后面我会以视频授课的方式讲解大家所感兴趣的前端知识。粉丝超过1000，我将大量的录制视频课程。希望大家帮忙多多宣传。

如果您对我的文章感兴趣，可以多多关注，每天八点更新一篇文章。