Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
可以运行在 Node、浏览器和 Rhino 平台上。
安装
在服务器端最容易的安装方式就是通过 npm (node.js 的包管理器),方法如下:
全局使用less:
npm install less -g
如果你不在全局使用编译器,那么你可以:
npm i less --save-dev
命令行用法 1
安装 Less 后,就可以在命令行上调用 Less 编译器了,如下:
$ lessc styles.less
这将输出编译之后的 CSS 代码到
stdout
,你可以将输出重定向到一个文件:$ lessc styles.less > styles.css
若要输出压缩过的 CSS,只需添加
-x
选项。如果希望获得更好的压缩效果,还可以通过--clean-css
选项启用Clean CSS进行压缩。帮助
lessc --help
lessc --h
路径
lessc --include-path=PATH1;PATH2
使用此来配置较少使用的路径列表,以查找导入的路径。
在node,设置路径选择:
{ paths: ['PATH1', 'PATH2'] }
Makefile 2
lessc -Mlessc --depends
No Color
lessc --no-color
不兼容IE
lessc --no-ie-compat
禁用JavaScript
lessc --no-js
Lint 3
lessc --lint
lessc --l
Silent
lessc -s
lessc --silentStrict Imports
lessc --strict-imports
允许安全的HTTPS主机
lessc --insecure
版本
lessc -v lessc --version
压缩
lessc -x lessc --compress
代码中使用
可以像下面这样在代码中调用 Less 编译器(Node 平台)。
var less = require('less'); less.render('.class { width: (1 + 1) }', function (e, css) { console.log(css); });
输出结果为:
.class { width: 2; }
Rhino命令行
命令行 rhino 版本需要包含以下两个文件:
- less-rhino-.js - 编译执行,
- lessc-rhino-.js - 命令行支持
命令行执行编译:
java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css
以上将编译 styles.less 文件并保存为 styles.css 文件。输出文件的参数是可选的,如果没有指定该参数,less将默认输出到标准输出中(
stdout
)。
客户端用法
在客户端使用 Less.js 是最容易的方式,并且在开发阶段很方便,但是,在生产环境中,性能和可靠性非常重要,我们建议最好使用 node.js 或其它第三方工具进行预编译。
那就开始吧,在页面中加入
.less
样式表的链接,并将rel
属性设置为 "stylesheet/less
":<link rel="stylesheet/less" type="text/css" href="styles.less" />
接下来,下载less.js并通过
<script></script>
标签将其引入,放置于页面的<head>
元素内:<script src="less.js" type="text/javascript"></script>
提示
- 务必确保在 less.js 之前加载你的样式表。
- 如果加载多个
.less
样式表文件,每个文件都会被单独编译。
浏览器选项
在
<script src="less.js"></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>
书籍推荐
Less Web Development Essentials, by Bass Jobsen, Foreword by Alexis Sellier
注释:
1、less.js用法:http://www.runoob.com/manual/lessguide/usage/#command-line-usage-installing-lessc-for-use-globally
2、Makefile:一个工程中的源文件不计其数,其按类型、功能、模块分别放在若干个目录中,makefile定义了一系列的规则来指定,哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于进行更复杂的功能操作,因为 makefile就像一个Shell脚本一样,其中也可以执行操作系统的命令。
3、Lint:lint是最著名的C语言工具之一,是由贝尔实验室SteveJohnson于1979在PCC(PortableC Compiler)基础上开发的静态代码分析,一般由UNIX系统提供。与大多数C语言编译器相比,lint可以对程序进行更加广泛的错误分析,是一种更加严密的编译工具。最初,lint这个工具用来扫描C源文件并对源程序中不可移植的代码提出警告。