Less Basic Learning
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
安装
命令行使用npm全局安装:
$ npm install -g less
命令行使用方法
安装以后,可以在命令行调用预编译器:
$ lessc styles.less
这样将会把编译的CSS输出为stdout。为了存储CSS结果可以使用:
$ lessc styles.less styles.css
clean-css 插件可以压缩输出结果,安装插件后,可以使用–clean-css选项
$ lessc --clean-css styles.less styles.min.css
更多使用方法:
http://lesscss.cn/usage/index.html
代码用法
可以从node调用预编译器
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); });
浏览器端用法
客户端是最简单的入门方法,有助于用较少的资源进行开发,但在生产中,当性能和可靠性很重要时,建议使用node.js或许多可用的第三方工具之一进行预编译。
首先,将rel属性设置为“stylesheet/less”的.less样式表链接起来:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
然后下载less.js,将其包含在script标签内:
<script src="less.js" type="text/javascript"></script>
选项是在这个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>
为了简便,也可以在script或者Link tags上设置为属性:
<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">