今天的less学习心得
官方网站：http://www.lesscss.net/#-pattern-matching-and-guard-expressions
检查编译自己的less代码网站:http://less.cnodejs.net/#
先贴段代码，等会儿在总结
@color:#f00;
body{
#nev{
background-color:@color*2;
}
a{
font-size:12px;
&:hover{
font-size:14px;
};
}
.h6(){
border-radius:#fff;
}
pre{.h6()}
}
//编译后的代码
body #nev {
background-color: #ff0000;
}
body a {
font-size: 12px;
}
body a:hover {
font-size: 14px;
}
body pre {
border-radius: #fff;
}
其实less很简单，不需要解释，看代码就能懂了，只有那么几个功能，而且还和其它的语言有相同的地方。
1、局部变量
@color:#443311;
#header{
color:@color;
}
//编译后的css
#header {
color: #443311;
}
2、混合（个人理解为局部变量传参也觉得可以叫做方法定义）
.class(@radiu){
border-radiu:@radiu;
}
pre{
.class(5px);
}
//编译后的代码
pre {
border-radiu: 5px;
}
3、嵌套
body{
h3{
color:#4400dd;
}
p{
font-size:12px;
.text{
color:#555;
}
}
}
//编译后的代码
body h3 {
color: #4400dd;
}
body p {
font-size: 12px;
}
body p .text {
color: #555;
}
4、函数与操作符
@color:#33ff00;
#headr{
color:@color *3;
}
//编译后的代码
#headr {
color: #99ff00;
}
5、函数重载（为个人的理解）——Pattern-matching and Guard expressions
.mixin(red,@color){
background-color:@color;
}
.mixin(blue,@color){
background-color:@color;
}
.class{
.mixin(red,"#f00");
}
//编译后的代码
.class {
background-color: "#f00";
}
6、函数
这个比较多，就贴图官方文档的API了
escape(@string); // 通过 URL-encoding 编码字符串
unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将浮点数转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
rgb(@r, @g, @b); // 转换为颜色值
rgba(@r, @g, @b, @a); // 转换为颜色值
argb(@color); // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness); // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 `hue` 值
saturation(@color); // 从颜色值中提取 `saturation` 值
lightness(@color); // 从颜色值中提取 'lightness' 值
red(@color); // 从颜色值中提取 'red' 值
green(@color); // 从颜色值中提取 'green' 值
blue(@color); // 从颜色值中提取 'blue' 值
alpha(@color); // 从颜色值中提取 'alpha' 值
luma(@color); // 从颜色值中提取 'luma' 值
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
greyscale(@color); // 完全移除饱和度，输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);
// 如果 @color1 的 luma 值 > 43% 输出 @darkcolor
// 否则输出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
还是贴一个使用的例子
.mixin(dark,@color){
color:darken(@color,10%);
}
.header{
.mixin(dark,#f00);
}
//编译后的代码
.header {
color: #cc0000;
}
7、&符号（串联选择器）
a{
font-size:14px;
&:hover{
font-size:12px;
}
}
//编译后
a {
font-size: 14px;
}
a:hover {
font-size: 12px;
}
所谓的串联选择器，就是指把&符号里的样式，串连在父样式上，并行
9、引入
一般是在一个mian.less中引入其他的less
@import "less/myless"//引入的文件为myless.less,其中可以省略后坠，当然也可以不用省略 @import "css/mycss.css"//引入外部的css文件
10、字符串插值
@url:"www.noin.cn";
background-image:url("@{url}/img/head.png");
//编译后
background-image: url("www.noin.cn/img/head.png"); 很好了，今天大致的less心得就写这么多吧，明天就要用一上午的时间看完coffeescript;这个也是一个神器啊...简化js的语言，本来想要把 zonda的学习心得写下来的，但是还是觉得自己也就能写一点皮毛，还是请大家去官网看一下吧，其实安装zonda我就装nodejs都装了2天还没装上，都觉得自己好笨哦。
加油！