Less常用的知识点

变量

LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。命名变量必须在变量名前加“@”，‘：’表示赋值，必须以分号结束

	@img_patch:'../../img/cancer/pc/';

变量插值

将图片资源所在的文件夹路径定义成一个变量，在设置背景图片时，就可以试使用该变量替代路径，当文件夹路径发生改变时，也可以直接修改该变量，非常便利。

 	@img_patch:'../../img/cancer/pc/';
	.sky{
	background: url("@{img_patch}starbg.png") no-repeat top center;
	background-color: #4e3843;
	width: 100%;
	overflow: hidden;
	min-width: 1200px;
	position: relative;
	.video{
		position: absolute;
		top: 0;
	}
}

编译结果：

.sky {
  background-color: #4e3843;
  width: 100%;
  overflow: hidden;
  min-width: 1200px;
  position: relative;
}
.sky .video {
  position: absolute;
  width: 1920px;
  margin-left: -960px;
  left: 50%;
  top: 0;
}

函数

定义的函数在编译的css文件中不显示，可以定义包含参数的函数。
函数可以用来处理兼容跟处理移动端的尺寸计算

//函数定义
.name（）{/*无参函数*/
/*code*/
backgound-color:#f10;
}
.fn1(@fontSize){
/*传参函数，没有设定默认值的时候调用该函数必须传参，否则会报错*/
	font-size:@fontSize + 'px'
}
.fn2(@color:#fff){
	/*定义了默认值的传参函数可以在调用的时候不传入值*/
	color:@color
}
p{
	.name()
	.fn1(15)
	.fn2()
}

编译结果：

p{
	backgound-color:#f10;
	font-size:15px;
	color:#fff
}

嵌套

嵌套规则允许在一个选择器中嵌套另一个选择器，它减了选择器的层级关系，使代码的结构非常清晰，且写起来也非常方便。但是容易嵌套很深，编译出来的css文件看起来不舒服（小声逼逼）。

.material-list{
			padding-top: 111px;
			margin-bottom: 121px;
			&::after{
				content: "";
				height: 0;
				display: block;
				visibility: hidden;
				clear: both;
			}
			.materialItem{
				width:154px;
				height:191px;
				float: left;
				margin-right: 8px;
				position: relative;
				p{
					position: absolute;
					width: 100%;
					text-align: center;
					font-size:16px;

					
					font-weight:400;
					color:rgba(84,40,27,1);
					line-height:19px;
					bottom: 28px;
					left: 0;
				}
			}
			& .materialItem:last-child{
				margin-right: 0;
			}
		}

编译结果：

.material-list {
  padding-top: 111px;
  margin-bottom: 121px;
}
.material-list::after {
  content: "";
  height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}
.material-list .materialItem {
  width: 154px;
  height: 191px;
  float: left;
  margin-right: 13px;
  position: relative;
}
.material-list .materialItem p {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #54281b;
  line-height: 19px;
  bottom: 28px;
  left: 0;
}
.material-list .materialItem:last-child {
  margin-right: 0;
}

导入

在main.less输入如下代码：

@import url('../../../public/css/mixin.less');

在编译的时候会涉及的所有文件内容都编译到css文件中，通常与函数配合使用，使代码条理更清晰。