带你认识Less

如今的前端，玩起来的花样真是五花八门，抽空花了点时间，整理了这篇文章，涉及的知识不深，但用起来还是很舒服的，就算是认识一下这个强大的less吧，好，废话不多说，进入正题。

认识Less

1.首先它是干嘛的

2.如何配置它

3.用sublime编辑器如何让它的代码高亮，提升编码质量

4.它的语法难吗

5.我要怎么编译它，转成我要用的css(基于less的工具,node实现)

我们先来看下官网怎么说的

一种动态样式语言.

LESS将CSS赋予了动态语言的特性，如变量，继承，运算，函数. LESS既可以在客户端上运行(支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

也就是说它最终输出的还是我们所认识的css， 它具有动态的语言特性。所以，它最终还是一个工具，并不是取代我们的css，这一点要记住。既然是工具，那一定有它的运行环境：

环境配置

我在用的时候，看过别人的博客写的一些文章，有讲在浏览器端引入less.js文件的等等用法，但是我个人认为，有好的工具可以用，为什么要纠结怎么用呢，比如基于webpack的，这些都是很好的工具。下面我给大家分享一下我个人用的工具（当然，各有所好，你也可以去官网上把方法都试一下）

因为是基于node的，所以第一步要搭建好node环境：（因为不是重点介绍node,所以简单的搭建一下）

Node.js安装包及源码下载地址为：https://nodejs.org/en/download/

官网有不同操作系统的版本，根据你的电脑，下载合适的版本进行安装。

详细参考这里：http://www.runoob.com/nodejs/nodejs-install-setup.html

安装好以后我是试一下是否安装成功：（命令行工具 windows:在开始那打cmd ）

node --version   npm --version （安装好后这个包工具一般自带）

成功它会返回版本号

简单的搭建就到这里，下面我们进入今天要讲的less

命令行输入：

npm install less -g  （-g全局可以使用，就是你在d盘和桌面都可以调用它）

你也可以指定版本号：

npm install less@1.6.2 -g

当然你也可以检测它是否安装成功：

lessc --version (注意输入的是lessc）

使用它：

Usage: lessc [option option=parameter ...][destination]

给大家一个实例：

lessc -x ./less/index.less main.css

意思就是用这个编译工具去编译当前目录less文件夹下的index.less文件 编译成功后，结果输出到当前目录下的main.css文件中，如果不存在main,会自动创建,这里只需要在html文件中引入main.css的文件就可以了。这个工具的好处是，它可以压缩代码，很神奇吧~~

对于有强迫症的同学来说，当你很努力的敲上一段代码时，你的编辑器全是灰灰的代码，估计连继续写下去的想法都没有了~。这里给大家介绍一个sublime的插件，可以高亮less文件中的代码哦~~~

下载地址：https://github.com/danro/LESS-sublime/zipball/master

如何去安装它（sublime）

菜单栏首先找到首选项，选择第一个，它会打开浏览插件的目录，然后新建less的目录，将你刚刚下载的压缩包解压到那个文件夹，ok安装好。紧接着使用它就好了，来看图：

点击右下角，选择LESS，重新启动它就好啦~~

是不是很简单~~~

语法介绍

给大家介绍常用的用法：

1.变量

恩，这个词不陌生，js中常提到。

@color: red;

body{ background: @color;}

从代码看，很容易理解，就是将需要的值存在一个代码中，可以带不同的地方调用它。改的时候，只需要改一处就好了。

2.混合

先看一个代码：

是不是看上去很简洁呢？ less还是很强大的。

3.嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

4.函数&运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

这里要提的是，不能瞎运算，举个例子，可能你会疏忽这样写： .red(@length*4) ，不信的话，你编译一下，它会报错的。

5.注释

CSS 形式的注释在LESS 中是依然保留的

LESS 同样也支持双斜线的注释, 但是编译成CSS 的时候自动过滤掉

6.其他

当然less还有一些高级语法，在这里就不一一介绍了，给大家贴个手册，感兴趣的，看一看。

LESS:

别人曾经在学习上给了我很大的帮助，如今我也想写点东西去帮助别人，仅此而已

作者：可爱的圣诞老人
链接：https://www.jianshu.com/p/f90bcd11f8ba