css less语法

less

  1、安装
   cnpm install -g less
   (1)耗费性能,不能在开发环境中使用
	   在文件引入less编译器
		<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.3/less.min.js" ></script>
		或下载好的less.js文件
		
	   引入less样式
	   <link rel='stylesheet/less' type='text/css' href='less文件路径'></link>	
	
   (2)命令行编译less文件
		在less文件所在文件夹,启动命令行
		lessc 待编译文件.less 编译后文件.css
  2、语法
	
	(0)可直接计算表达式
		width:2*3px;
		
	(1)设置变量
		@变量名:样式
		直接@变量名使用

	(2)样式的引用
		.a{xx}
		.b{.a;} 即可引用a类的样式
	
	(3)带参数的样式引用,相当于函数
		.a(@变量)  //该样式不会显示出来
		{
			样式:@变量
		}
		.b{
			.a(样式值);//不加引号
		}
		
	(4)带参数默认值的样式引用
		.a(@变量:样式值)  //该样式不会显示出来
		{
			样式:@变量
		}
		.b{
			.a(样式值);//不加引号,若不传值则按默认值显示
		}
	
	(5)同名函数,不同样式
		.a(不加@名称,@参数,...){样式}
		.a(不加@名称2,@参数,...){样式}
		,a(@_,@参数,...){样式};  表示不论选择哪个函数,都会带上该函数内的样式
		
		.b{.a(不加@名称,值,...);...}使用
	
	
	(6)能看出层级的嵌套
		选择器1{
			样式;
			选择器2{
				样式;
			}
		}
		表示设置选择器1元素的样式,及其子元素选择器2的样式
	
	(7)自动填充参数
	
		.a(@参数1,@参数2,@参数3,..)
		{
			样式:@arguments; //会将参数全部放在这里,若设置了默认值,则调用该函数则不需要传入参数
		}
		
		.b{.a(值1,值2,...);}
	
	(8)!important
		
		在样式后添加该标记,会让样式后追加该标记
		在方法会调用类后追加,会让其所有属性都追加该标记
	
	(9)不编译指定内容
	.a{
		content:~"内容";//在浏览器上将会原样显示
	}

代码示例:
less文件:

@main-color:red;

.a{
  background-color: @main-color;
}
.b{
  color:@main-color;
}

.c{
	border: solid 1px red;
}
.d{
	.c;
}

.e(@bk){
	background-color: @bk;
}
.f{
	.e(red);
}
.g(@col:red)
{
	color:@col;
}
.h{
	background-color: yellow;
	.g;
}
.i{
	border:solid 2*3px red !important;
}

.j{
	color:red;
	
	h1{
		color:yellow;
	}
}

.k(@width:1px,@solid:solid,@color:red){
	border:@arguments;
}
.l{
	.k;
}