less语法总结

css预处理器-less语法总结

less中文网

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

安装

$ npm install -g less

less编译

vscode Less插件
Easy LESS 插件用来把less文件编译为css文件
安装完毕插件后需要重启一下vscode
之后只要保存less文件就会自动生成css文件

less中的注释

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

以/**/包裹的注释会被编译到css文件中

//这是见不得人的注释
/*这是想暴露出去的注释*/

less中的变量

使用@来声明一个变量：@pink：pink

1. 作为普通属性值来使用：直接使用@pink
2. 作为选择器和属性名：#@{selector的值}的形式
3. 作为URL：@{url}
4. 变量的延迟加载

@color:deeppink;
@m:margin;
@selector:#wrap;
*{
	@{m}:0;
	padding:0;
}
@{selector}{
	position:relative;
	width:300px;
	height:400px;
	border:1px solid;
	margin:0 auto;
	.inner{
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
		background:@color;
		height:100px;
		width:100px;
	}
}

less中的嵌套规则

1. 基本嵌套规则
2. &的使用(表示平级关系)

@color:deeppink;
*{
	margin:0;
	padding:0;
}
#wrap{
	position:relative;
	width:300px;
	height:400px;
	border:1px solid;
	margin:0 auto;
	.inner{
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
		background:@color;
		height:100px;
		width:100px;
		&:hover{
		background:pink;
		}
	}
}

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

混合的定义在less规则有明确的指定，使用 . 的形式来定义

1. 普通混合(编译到原生css中的)

   .juzhong{
   	position:absolute;
   	left:0;
   }
   #wrap{
   	position:relative;
   	.inner{
   		.juzhong;
   	}
   }
   

2. 不带输出的混合(加双括号)

   .juzhong(){
   	position:absolute;
   	left:0;
   }
   #wrap{
   	position:relative;
   	.inner{
   		.juzhong;
   	}
   }
   

3. 带参数的混合

   .juzhong(@w,@h,@c){
   	position:absolute;
   	left:0;
   	background:@c;
   	height:@h;
   	width:@w;
   }
   #wrap{
   	position:relative;
   	.inner{
   		.juzhong(100px,100px,pink);
   	}
   }
   

4. 带参数并且有默认值的混合

   .juzhong(@w:10px,@h:10px,@c:pink){
   	position:absolute;
   	left:0;
   	background:@c;
   	height:@h;
   	width:@w;
   }
   #wrap{
   	position:relative;
   	.inner{
   		.juzhong();
   	}
   }
   

5. 带多个参数的混合

6. 命名参数

   .juzhong(@w:10px,@h:10px,@c:pink){
   	position:absolute;
   	left:0;
   	background:@c;
   	height:@h;
   	width:@w;
   }
   #wrap{
   	position:relative;
   	.inner{
   		.juzhong(@c:black);
   	}
   }
   

7. 匹配模式

   构造不同方向的三角形

   .triangle(L,@w,@c){
   	width:0px;
   	height:0px;
   	border-width:@w;
   	border-style:dashed solid dashed dashed;
   	border-color:transparent @c transparent transparent;
   	overflow:hidden;
   }
   .triangle(R,@w,@c){
   	width:0px;
   	height:0px;
   	border-width:@w;
   	border-style:dashed solid dashed dashed;
   	border-color:transparent transparent transparent @c;
   	overflow:hidden;
   }
   .triangle(T,@w,@c){
   	width:0px;
   	height:0px;
   	border-width:@w;
   	border-style:dashed solid dashed dashed;
   	border-color:transparent @transparent @c transparent;
   	overflow:hidden;
   }
   .triangle(B,@w,@c){
   	width:0px;
   	height:0px;
   	border-width:@w;
   	border-style:dashed solid dashed dashed;
   	border-color:@c transparent transparent transparent;
   	overflow:hidden;
   }
   #wrap .sjx{
   	.triangle(L,40px,red)
   }
   

8. arguments变量

   .border(@1,@2,@3){
   	border:@arguments;
   }
   #wrap .sjx{
   	.border(1px,solid,black)
   }
   

less运算

在less中可以进行加减乘除的运算

计算的一方带单位就可以

#wrap .sjx{
	width:(100 + 100px);
}

less继承

性能比混合高

灵活度比混合低

//juzhong-extend.less
.juzhong{
	position:absolute;
	left:0;
	margin:auto;
}

//extend.less
@import "mixin/juzhong-extend.less";
#wrap{
	position:relative;
	width:300px;
	height:300px;
	border:1px solid;
	.inner.extend(.juzhong){
		&:nth-child(1){
			width:100px;
			height:100px;
			background:pink;
		}
		&:nth-child(2){
			width:50px;
			height:50px;
			background:yellow;
		}
	}
}

less避免编译

*{
	margin:0+10px;
	padding:~"cacl(100px+100)";
}