前端开发工具less入门

ess就是相当于jQuery

less css属于动态样式语言，属于css预处理的一种，他的语法类似于css，为css赋予了动态语言的特性，使得css能够定义变量，函数继承与运算，使得css更加方便维护和管理；

1.less 里面的注释

less里面和编程语言一样有注释，分为两种

1. //  这种注释只是在less里面可以看见的不会再编译完之后的css文件里面看见 

2./* */  这种注释可以编译  并且能在编译完的css文件里面看见。

2.less里面的变量

变量的声明  //声明变量@+变量名+：+变量的值+；

例如：

@test : 300px;
body{
	background: red;
	div{
		height: @test;
		width: @test;
		ul{
			background: blue;
			li{
				line-height: 20px;
			}
		}
	}
}

3.less里面的混合

3.1  普通的混合（不带参数）

.box1{
	width: 300px;
	height: 300px;
	background: red;
}
.box2{
	margin-left: 400px;
	.box1;   //直接用了.box1 使得box1里面的所有样式拷贝到了box2里面
}

编译后的样式为

.box1 {
  width: 300px;
  height: 300px;
  background: red;
}
.box2 {
  margin-left: 400px;
  width: 300px;
  height: 300px;
  background: red;
}

3.2带参数的混合

.box1(@act_width,@act_height){  //能接受两个参数一个是实际的宽度一个是实际的高度
	width: @act_width;
	height: @act_height;
	background: red;
}
.box2{
	margin-left: 400px;
	.box1(100px,100px);  
}

编译后的代码是这样的

.box2 {
  margin-left: 400px;
  width: 100px;
  height: 100px;
  width: 300;
  height: 300px;
  background: red;
}

就不会出现box1了

这样的话就不会有box1的样式了，但是3.1那样就会有box1的样式

需要注意的是一下的写法是会出现编译错误的

bor(@act_px){
	border:@act_px solid blue;
}
.box2{
	margin-left: 400px;
	.box1(100px,100px);
	bor(8px);
}

是因为最后一行的bor前面什么也没有回编译失败最好把bor写为class或者id的形式（前面加.或者#号）

3.3混合中的默认

混合中的参数如果不用特殊说明德话是可以选择默认的；

语法是：变量名+：+默认值

.box1(@act_width,@act_height){  //能接受两个参数一个是实际的宽度一个是实际的高度
	width: @act_width;
	height: @act_height;
	background: red;
}
.bor(@act_px:5px){
	border:@act_px solid blue;
}
.box2{
	margin-left: 400px;
	.box1(100px,100px);
	.bor(8px);
}
.box{
	.box1(100px,100px);
	.bor();
}

4.匹配模式

匹配模式就是相当于一般的编程语言中的if判断。（本人觉得也相当于c++里面的重载）

比如说写一个页面三角的个数是十分多的，但是一个三角形的代码也是比较长的，例如下面这个向上的三角形

.tri{
	width: 0px;
	height: 0px;
	overflow: hidden;;

	border-color: red transparent  transparent transparent;
	border-style: solid dashed  dashed dashed;  //把其余的部分设置为虚线（dashed）是为了兼容IE6
	border-width: 10px;
}

这研究可以用匹配模式了

语法和普通的定义一个混合一样，不过第一个参数是进行醒匹配的字符串（或者叫变量），后面的是参数列表

例如下面的顶一个三角的四个方向

.triangle(top,@c:red,@w:10px){
	border-color: transparent  transparent @c transparent;
	border-style: solid dashed  dashed dashed;
	border-width: @w;
}
.triangle(bottom,@c:red,@w:10px){
	border-color: @c transparent transparent transparent;
	border-style: dashed  dashed solid dashed;
	border-width: @w;
}
.triangle(left,@c:red,@w:10px){
	border-color: transparent @c transparent transparent;
	border-style: dashed solid  dashed dashed;
	border-width: @w;
}
.triangle(right,@c:red,@w:10px){
	border-color: transparent transparent transparent @c;
	border-style: dashed dashed dashed solid; 
	border-width: @w;
}

第一个匹配的参数是上下左右

下面的这一行就是使用这个

.tri{
	.triangle(right,blue,15px)
}

第一个参数进行匹配的参数(比如我后面写的是right及时调用right这个模式)，然后后面就是参数列表
当使用匹配模式的时候会 自动的调用一个匹配模式

.triangle(@_,@c,@w){
	width: 0px;
	height: 0px;
	overflow: hidden;
}

第一个参数是@_是语法需要必须写的，后面和元匹配模式的参数列表的参数也是要相同的，当然也是可以增加参数的

例如

.triangle(@_,@c,@w,@h:500px){
	width: 0px;
	height: 0px;
	margin-left: @h;
	overflow: hidden;
}

像这样的话其他的没有第四个参数但是这个自动调用的匹配模式有，只能把多余的参数设置为默认的，因为调用的时候不是调用时候参数列表中没有这个参数

5.less中的运算

less中是支持基本运算的

@a:100px;
@b:200px;

.operation{
	width: @b -10;
}

在@b（也就是定义的变量后面要加上一个空格或者给这个变量加上括号），否则的话会识别为变量

6.less中的嵌套

当我们写HTML的时候通常是采用胶套的格式，但是给他们写样式的时候

比如 div ul li{}

就像是下面代码这样

.test {
  width: 400px;
}
.test ul li {
  float: left;
  cursor: pointer;
  width: 100%;
  height: 25px;
  line-height: 25px;
  background: #ccc;
  margin-top: 5px;
}
.test ul li:hover {
  background: red;
}

用less就可以像写HTML那样使用嵌套的格式

代码这样和上面那样是一样的效果

.test{
	width: 400px;
	ul{
		li{
			float: left;
			cursor: pointer;
			width: 100%;
			height: 25px;
			line-height: 25px;
			background: #ccc;
			margin-top: 5px;
			&:hover{ //表示的是它上一层的选择器
				background: red;
			}
		}
	}
}

同样是实现了下面的效果

7.less中arguments变量

arguments变量一般不常用只是在批量更改变量的时候使用

就如下面这样

.border(@px:8px,@sty:solid,@bac:red){
border:@px @sty  @bac;
}

这样就可以写为这样

.border(@px:8px,@sty:solid,@bac:red){
border:@arguments; 
}
.argument_test{
.border();
}

也可以给.border里面传递参数也就进行相应的改变了，

8.less中避免编译

有的时候我们写的代码是需要浏览器去编译的，比如运算还有微软的滤镜等

必须下面的这个运算

.avoid{
width: calc(@b - 20);
}

编译之后会变为

.avoid {
  width: calc(180px);
}

我们不希望这个进行编译

语法 取反符号（~）+‘’（双引号或者单引号）里面是不想被编译的东西

就如这样

.avoid{
	width: ~'calc(@b - 20)';
}

编译之后就会变为这样

.avoid {
  width: calc(@b - 20);
}

9.！important的使用

在使用中混合的时候使用；

.box2{
	margin-left: 400px;
	.box1(100px,100px);
	.bor(8px);
}

.impor{
	.box2()!important;
}

就会编译成一样的格式

.impor {
  margin-left: 400px !important;
  width: 100px !important;
  height: 100px !important;
  background: red !important;
  border: 8px solid #0000ff !important;
}

基本上也就这么多东西了。

使用less的过程很简单

1.下载一个koala（http://koala-app.com/index-zh.html）

2.创建一个.less文件

3.打开koala之后进入主界面如下

4.把要进行的项目（.less文件）拖到这个里面，右键项目明确导出位置

5.左键项目  按下图进行操作

6.点击执行编译就可以按照上述的编程了。

补充：koala这个文件还可以设置为中文，点击设置就能看见