这篇教程写的挺不错的:http://www.cnblogs.com/fsjohnhuang/p/4187675.html
使用一点时间之后再看。
less中文官网:http://www.bootcss.com/p/lesscss/
在开发阶段,在浏览器上直接使用.less
在页面中加入 .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>
在生产阶段,编译之后,再调用
使用winless编译。nodejs 还有点麻烦。
其实使用nodejs编译好一些,它的功能丰富一点。
示例1、
//变量
@font-size:20px; @color:red;
//混合 .sfp(@color:steelblue){ width:100px; height:100px; border-radius:5px; border:1px solid @color } h2{ font-size: @font-size; } .con{ .sfp;
//嵌套 p{ color:@color;
//函数和运算 font-size: @font-size * 2; } }
监视模式下,html改变的话,不会自动刷新。
示例2、
//将变量名定义为变量
@fnord: "I am fnord.";
@var: ‘fnord‘;
*{
content: @@var;
}
示例3、@argument
.border (@width: 2px, @style: solid, @color: steelblue) {
border: @arguments;
border: @arguments;
border: @arguments;
}
.con{
.border(2px, dotted, red);
}
示例4、
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
> >= = =< <
关键字true只表示布尔真值
导引序列使用逗号‘,’—分割,当且仅当所有条件都符合时,才会被视为匹配成功
常见的检测函数:iscolor isnumber isstring iskeyword isurl ispixel ispercentage isem and not
示例5、
.bordered {
&.float { //.bordered .float
float: left;
}
.top {
margin: 5px;
}
}
示例6、
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
#header a {
color: orange;
#bundle > .button;
}
原文:http://www.cnblogs.com/wang-jing/p/4593019.html