Less的点滴总结

Less is more than css.

LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单。

LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们更推荐使用第三种方式，通过 LESS 的编译器，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。

1、变量

<span style="font-size:12px;">@border-color : #b5bcc7; 
.mythemes tableBorder{ 
     border : 1px solid @border-color; 
}</span>

该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。

<span style="font-size:12px;"> @width : 20px; 
 #homeDiv { 
   @width : 30px; 
   #centerDiv{ 
       width : @width;// 此处应该取最近定义的变量 width 的值 30px 
              } 
 } 
 #leftDiv { 
     width : @width; // 此处应该取最上面定义的变量 width 的值 20px 
 }</span>

2、Mixins（混入）
它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。

Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性：

// 定义一个样式选择器
.borderRadius(@radius){ 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 
 // 使用已定义的样式选择器
#header { 
    .borderRadius(10px); // 把 10px 作为参数传递给样式选择器
} 
.btn { 
    .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
 }

默认值：

.borderRadius(@radius:5px){ 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 
.btn { 
    .borderRadius(); 
}

三角：

完整的应该如下所写：

.sanjiao{
	width:0px;
	height: 0px;
	overflow: hidden;
	border-width: 10px;
	border-color: transparent transparent red transparent;
	border-style: dashed dashed solid dashed;   
}

//匹配

.trangle(top,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: transparent transparent @c transparent;
	border-style: dashed dashed solid dashed;
	
}
.sanjiao{
	.trangle(top,100px,#000);
}

都具备的默认属性，需要添加如下代码：

.trangle(@_,top,@w:5px,@c:#ccc){
	width: 0px;
	height: 0px;
	overflow: hidden;
}

常用样式的书写与使用：

.pos(f){
	position: fixed;
}
.test{
	……
	.pos(f);
}

运算：

@test_01:300px;
.box_02{
	width: @test_01 - 20*5;
}

 @init: #111111; 
 @transition: @init*2; 
 .switchColor { 
    color: @transition; 
 }

对于颜色的操作的函数列表：

 lighten(@color, 10%); // return a color which is 10% *lighter* than @color 
 darken(@color, 10%); // return a color which is 10% *darker* than @color 
 saturate(@color, 10%); // return a color 10% *more* saturated than @color 
 desaturate(@color, 10%);// return a color 10% *less* saturated than @color 
 fadein(@color, 10%); // return a color 10% *less* transparent than @color 
 fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
 spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
 spin(@color, -10); // return a color with a 10 degree smaller hue than @color

init: #f04615; 
 #body { 
  <span style="white-space:pre">	</span>background-color: fadein(@init, 10%); 
 }

hover的书写方式：

a { 
    color: red; 
    text-decoration: none; 
    &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
        color: black; 
        text-decoration: underline; 
     } 
 }

变量很多，不想一一写出来怎么办，@argument

.border_arg(@w:3px, @color:red, @xx:solid){
	border:@arguments;
}
.test_arguments{
	.border_arg(40px);
}

避免编译，使用滤镜（例如filter之类的就可以在前边加~，还须实际中进行测试）

.test_03{
	width: 300px;
	calc(300px-30px);//浏览器计算
	<span style="color: rgb(34, 34, 34); font-family: Arial, sans-serif; line-height: 22.375px; background-color: rgb(249, 249, 249);">~</span> 'calc(300px-30px)';   //避免编译
}