less的使用

1.浏览器直接使用——最简单的用法（不推荐使用，性能差）

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

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

然后点击页面顶部download按钮下载 less.js, 在<head> 中引入:

<script src="less.js" type="text/javascript"></script> //或者官方CDN加速的<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

注意你的less样式文件一定要在引入less.js前先引入。

请在服务器环境下使用！本地直接打开可能会报错！（用Firefox可以不依赖服务器）

可以看到Chrome会报出这个错误，本地直接打开而不依赖服务器软件话是不能用http协议的，自然XHR就不能工作了。less.js就是利用XHR来请求less文件里的源码的。

2.在服务器端使用

2.1命令行下编译less文件

在全局安装less

$ npm install -g less

之后可以在cmd里面直接使用less编译了

 

2.2直接在命令行下编译字符串less代码

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
});

输出

.class {
  width: 2;
}

 

调用解析器把字符串less代码输出到文件

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {
    tree.toCSS({ compress: true }); // Minify CSS output
});

 

3.推荐一个开源的预处理语言图形编译工具——Koala

 

使用极其简单只要下载安装后，把项目拖入软件内选择less文件，按“Compile”就可以在同一个目录下生成css文件了

 

posted @ 2017-04-06 12:21  张啊咩  阅读(184)  评论(0)  编辑  收藏  举报