Less入门学习

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

安装

*win+R 打开cmd， 找到文件对应目录，如在c盘则输入 cd/ 回车，
“C:\Users\ucmed\Documents\HelloHBuilder\css”则输入“cd C:\Users\ucmed\Documents\HelloHBuilder\css”回车，
再输入以下语句：*

npm install -g less

命令行用法

安装 Less 后，就可以在命令行上调用 Less 编译器了，编译目录下的styles.less文件，如下：

lessc styles.less

这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件：

lessc styles.less > styles.css

若要输出压缩过的 CSS，只需添加 -x 选项

lessc styles.less > styles.css -x

如果希望获得更好的压缩效果，还可以通过 –clean-css 选项启用 Clean CSS 进行压缩。

执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表

最后通过如下进行引用：

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

客户端用法

在浏览器上跑 less.js （下载）非常方便开发，但是不推荐用于生产环境。

//务必确保在 less.js 之前加载你的样式表。<link rel="stylesheet/less" type="text/css" href="styles.less" /><script src="less.js" type="text/javascript"></script>

浏览器端设置参数

在 之前 定义全局的 less 对象就可以为 Less.js 设置参数

<!-- set options before less.js script --><script>  less = {    env: "development",    async: false,    fileAsync: false,    poll: 1000,    functions: {},    dumpLineNumbers: "comments",    relativeUrls: false,    rootpath: ":/a.com/"  };</script><script src="less.js"></script>