【前端框架学习笔记】LessCSS（1）：基本安装与使用

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

*Less的作者把原生CSS称为“vanilla CSS”。

我认为Less最大的优点就是减少了许多重复的css代码。

专门的编译工具：http://koala-app.com/index-zh.html（可通过该工具自行创建less文件（后缀名为 .less），无需安装node.js。教程：http://blog.csdn.net/u011250873/article/details/45917519）

通过终端安装（for Mac）：

安装过node.js后，打开终端，输入以下命令进行下载&安装：

npm install -g less

（如果有安装国内的cnpm的话，可以把npm改为cnpm。下载安装的速度更快。虽然不知道会有什么风险就是了）

安装完毕后，输入以下代码调用less编译器，并输出编译之后的 CSS 代码到名为mystyles的css文件（没有的话就会创建）

lessc styles.less > /项目路径/mystyles.css

（Mac可以直接将项目文件夹拖到终端，终端会显示该文件夹的具体路径）

开始使用（也就是coding部分）：

在head标签内依次加入以下2个标签：

1. <link rel="stylesheet/less" type="text/css" href="styles.less" />

2. 下载less.js并解压，在dist找到less.js，复制粘贴到项目文件夹下，并在script标签内引入：

<script src="less.js" type="text/javascript"></script>

接着就是根据less的语法正常书写代码了。待续。

--------

Ref：

http://less.bootcss.com/

http://www.imooc.com/video/4825

http://www.imooc.com/video/4827

免责声明：http://www.jianshu.com/p/cd9793098eea