标签：编译器 body 无限 round numbers bsp raw relative 保存
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
作为一门CSS预处理语言，它并不像CSS一样能直接使用，而是需要编译后使用，如何编译呢，下面分node 和浏览器端两种情况解释。
浏览器端使用less，只需要做如下两步：
1.引如Less
使用link标签引入less，需要注意的是 rel="stylesheet/less"
<link rel="stylesheet/less" type="text/css" href="styles.less" />
2.引入less解析用的js文件
<script src="less.js" type="text/javascript"></script>
3.声明解析，要在引入 less.js前进行声明。
<script> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script>
完事，就这么简单，但是 由于编译解析less需要消耗一定的性能，且渲染也会有延迟，所有推荐使用node或其他第三方工具进行编译后使用。
需要注意的是 js文件必须要在less文件后引入。
less.js 下载地址在这里
1. 使用npm安装less
$ npm install -g less
2.编译输出
使用命令行调用less编译器进行编译
$ lessc styles.less
这会输出到stdout编写CSS。将CSS结果保存到所选择使用的文件中
$ lessc styles.less styles.css
输出后你可以使用编译的style.css 啦。
less 的注释分为两种： /* 注释内容 */ 和 // 注释内容 。
/* */ 为块注释 可以注释一行或多行，
// 为行注释，只能注释一行，而且这种注释在编译处理时会被编译掉。
less中很方便的一个功能就是定义变量，当css多处用到同一个值的时候，如果不用变量，那么改动它需要改动100处，而使用变量的话，只需要修改变量的值便可以全局修改了，是不是很方便呢。
和PHP类似 变量都是以@开头，无论是定义还是使用，使用如下 ：
// 定义变量
@cell_width：100px；
//在使用的时候就可以这样使用
.cell{
width:@cell_width;
}
和css差别并不大，同样使用 选择器 后 带大括号 的形式，牛逼的是大括号里还可以写 选择器 +大括号 的形式，
在不考虑渲染优化的情况下可以无限套下去，但是考虑到浏览器渲染任务繁重，往往最多只套4层。
.body{
width:100%；
.section{
border:1px solid #000;
}
}
/*
解析后的效果是下面这样的
*/
.body{
width:100%；
}
.body .section{
border:1px solid #000;
}
除了套用，还可以引用：
.section{
border:1px solid #000;
}
.body{
width:100%；
.section；
} /* 解析后的效果是下面这样的 */
.body{
width:100%；
border:1px solid #000;
}
除了以上的，还能使用传参，哈哈哈
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.cell{
width: 100%;
//可以不传参数,默认用5px
.border_radius(10px)
}
可以说是非常灵活了，随便套随便引。
了解了以上的这些，就可以在实战中使用Less进行项目开发啦！
（完）
标签：编译器 body 无限 round numbers bsp raw relative 保存
原文地址：http://www.cnblogs.com/hanguozhi/p/7383729.html
