【前端框架学习笔记】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.

2. 下载less.js并解压,在dist找到less.js,复制粘贴到项目文件夹下,并在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

你可能感兴趣的:(【前端框架学习笔记】LessCSS(1):基本安装与使用)