less
这篇教程写的挺不错的：http://www.cnblogs.com/fsjohnhuang/p/4187675.html
使用一点时间之后再看。
less中文官网：http://www.bootcss.com/p/lesscss/
less中文官网：http://less.bootcss.com/ 函数详细一点
在开发阶段，在浏览器上直接使用.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;
}
从后往前看一遍
javascript的表达式
//可以在less中使用js表达式
/*@var: ~`"hello".toUpperCase()+'!'`;*/
//可以访问js环境
/*@var: `document.body.clientHeight`;*/
*{
content : @var;
}
避免编译
@var: ~`"@{str}".toUpperCase() + '!'`;
结果：@var: HELLO!;
其实就是，把~之后的内容原样输出，不会按照less和CSS处理
字符串插值：把变量嵌入到字符串
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
import
@import "lib.less" @import "lib" @import "lib.css"
注释
/**/会显示在css中 //不会显示在css中
命名空间
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
//使用
#header a {
color: orange;
#bundle > .button;
}
Math函数
round(1.67), ceil(2.4), floor(2.6), percentage(0.5)
运算，嵌套（&：.bordered.float）
模式匹配和引导，等用到了再看，细节有点多。
混合：跟嵌套不一样，可带参数，@argument
变量