less网站地址: http://lesscss.cn
快速入门
Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性,使CSS更易维护和扩展。
更少可以运行在Node或浏览器端。
例:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
输出:
#header { color: #6c94be; }
使用方法
可以通过npm在命令行上使用Less,作为浏览器的脚本文件下载或在各种第三方工具中使用。有关更多详细信息,请参阅“ 用法”部分
安装
在服务器上安装Less的最简单方法是通过npm, node.js包管理器,如下所示:
npm install -g less
命令行用法
安装后,您可以从命令行调用编译器,如下所示:
$ lessc styles.less
这将输出编译的CSS stdout。要将CSS结果保存到您选择的文件,请使用:
$ lessc styles.less styles.css
要输出缩小,您可以使用CSS clean-css插件。安装插件后,使用--clean-css选项指定缩小的CSS输出:
$ lessc --clean-css styles.less styles.min.css
要查看所有lessc不带参数的命令行选项,请参阅用法。
代码用法
您可以从节点调用编译器,如下所示:
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, output) { console.log(output.css);});
哪个会输出
.class { width: 2;}
配置
您可以将一些选项传递给编译器:
var less = require('less');
less.render('.class { width: (1 + 1) }', {
paths: ['.', './lib'], // Specify search paths for @import directives
filename: 'style.less', // Specify a filename, for better error messages
compress: true // Minify CSS output
},
function (e, output) {
console.log(output.css);
});
有关更多信息,请参阅用法
浏览器端用法
在浏览器中使用less.js非常适合开发,但不建议用于生产
客户端是最简单的入门方式,适合用Less开发,但在生产中,当性能和可靠性很重要时,我们建议使用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样式表时,每个样式表都是独立编译的。因此,您在样式表中定义的任何变量,混合或名称空间都无法访问。
○ 由于浏览器加载外部资源的原始策略相同,因此需要启用CORS
选项
通过在以下位置之前在全局less对象上设置选项来定义选项:<script src="less.js"></script>
<!-- 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>
或者为了简洁起见,可以将它们设置为脚本和链接标记上的属性(需要JSON.parse浏览器支持或polyfill)。
<script src="less.js" data-poll="1000" data-relative-urls="false"></script><link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">
详细了解浏览器选项