less的介绍和基本使用

less

• less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Minix、函数等特性，使css更易维护和扩展
• less可以在客户端上运行，也可以借助node.js在服务端运行

less 编译

• 运行时编译
  可以在less官网下载less.js文件，并在less样式的下方引入，这样在运行时，less.js就会把less编译成浏览器可以识别的css了

  <style type="text/less">	// 类型需要指定为less
  // 开始写less的样式
  </style>
  <script src="less/less.js"></script>	// 在样式的后面引入less.js
  

• 预编译
  还可以使用less的编译工具，例如koala，将写好的less文件直接编译成css供浏览器使用，

less中的注释

• 以//开头的注释，不会被编译到css文件中
• 以/**/包裹的注释会被编译到css文件中

less中的变量

• 使用@来申明一个变量： @pink:pink;

1. 作为普通属性值来使用: 直接使用@pink

   	@color: pink;	// 定义变量
   	* {
   		color: @color;	// 使用变量
   	}
   

2. 作为选择器和属性名: @{selector}的形式

   	/*不常用的方式*/
   	@m:margin;	// 定义的变量为属性名时
   	* {
   		@{m}: 0;	// 使用的时候需要加大括号
   	}
   	@selector: #wrap;	// 定义的变量为选择器时
   	@{selector} {	// 使用的时候需要加大括号
   		...
   	}
   

3. 作为URL: @{url}

4. 变量的延迟加载

   @var: 0;
   .class {
   	@var: 1;
   	.brass {
   		@var: 2;
   		three: @var;	// three的值是3
   		@var: 3;
   	}
   	@one: var;			// one的值是1
   }
   // 在less中，每一个大括号都是一个块级作用域，每当解析完一个作用域时，才会确定变量最终的值
   

less中的嵌套规则

• 基本的嵌套规则

	// 当less使用这种嵌套时
	#wrap {
		key1: value1;
		.inner {
			key2: value2;
		}
	}
	// 将会被解析成这种
	#wrap {
		key1: value1;
	}
	#wrap .inner {
		key2: value2;
	}

• &的使用

	// 当less使用这种嵌套时
	#wrap {
		key1: value1;
		.inner {
			key2: value2;
			&:hover {	// 父级引用
				key3:value3;
			}
		}
	}
	// 将会被解析成这种
	#wrap {
		key1: value1;
	}
	#wrap .inner {
		key2: value2;
	}
	#wrap .inner:hover {
		key3: value3;
	}

less中的混合

• 混合就是将一系列属性从一个规则集引入到另一个规则集的方式
• 混合的定义在less规则中有明确的指定，使用.的形式定义
• 当定义带参数的混合时，形参和实参的个数一定要相同
• 普通混合

// 这样混合
.a {
	key1: value1;
}
.b {
	.a;
}
// 会被混合成这样
.a {
	key1: value1;
}
.b {
	key1: value1;
}

• 不带输出的混合

// 这样混合
.a() {		// 如果给.a加上一对小括号
	key1: value1;
}
.b {
	.a;
}
// 将会被混合成这样
// .a()的样式将不会被编译到css中
.b {
	key1: value1;
}

• 带参数的混合

// 这样混合
.a(@w, @h, @c)
{
	width: @w;
	height: @h;
	color: @c;
}

.b {
	.a(100px, 100px, pink);
}

// 会被编译成这样
.b
{
	width: 100px;
	height: 100px;
	color: pink;
}

• 带默认值的混合

// 这样混合
.a(@w:10px, @h:10px, @c:deeppink)	// 传入默认值
{
	width: @w;
	height: @h;
	color: @c;
}

.b {
	.a();	// 可以不带实参
}

// 会被编译成这样
.b
{
	width: 10px;
	height: 10px;
	color: deeppink;
}

• 使用命名参数的混合

// 这样混合
.a(@w:10px, @h:10px, @c:deeppink)	// 传入默认值
{
	width: @w;
	height: @h;
	color: @c;
}

.b {
	.a(@c:black);	// 通过命名参数传递指定的实参
}

// 会被编译成这样
.b
{
	width: 10px;
	height: 10px;
	color: black;
}

• 匹配模式

// 这样混合
.a(A){	// 小括号里面的标识符没加@，是用作匹配的
	key1: value1;
}
.a(B){
	key2: value2;
}
.a(C){
	key3: value3;
}
.a(D){
	key4: value4;
}
.b {
	.a(B);	// 匹配指定的模式
}

// 将编译成这样
.b{
	key2: value2;
}

================================================================================================================================================================================
.a(@_){	//当小括号里的参数是@_时，将匹配任意模式
	key0: value0;
}
.a(A){
	key1: value1;
}
.a(B){
	key2: value2;
}
.a(C){
	key3: value3;
}
.a(D){
	key4: value4;
}
.b {
	.a(B);	// 匹配指定的标识符
}

// 将编译成这样
.b{
	key0: value0;	//	.a(@_)也被匹配到了
	key2: value2;
}

• 混合的arguments变量

.a(@px, @style, @color){
	border: @arguments;	// 相当于border: @px @style @color;
}
.b{
	.a(1px, solid, red);
}

// 将被编译成
.b{
	border: 1px solid red;
}

less计算

.a{
	width: (100+100px);	// 只需要一方带单位就可以了，支持加减乘除
}
// 将被编译成
.a{
	width: 200px;
}

less继承

.a{	// 用作继承的样式不能写成混合
	key1: value1;
}
.b:extend(.a){
	key2: value2;
}
// 将被编译成
.a,
.b{
	key1:value1;
}
.b{
	key2: value2;
}

less避免编译

.a{
	width: 100px + 100;
	height: ~"calc(100px + 100)";
}

// 将被编译成
.a{
	width: 200px;
	height: calc(100px + 100);
}