less深入

将属性作为变量使用

.test{
	color:#000;
	background-color:$color;
}
//编译后
.test{
	color:#000;
	background-color:#000;
}

//与变量一样，less在选择属性时，会将最后一个作为“最终”值
.test{
	color:#000;
	.inner{
		background-color:$color;
	}
	color:#ccc;
}
//编译后
.test{
	color:#000;
	color:#ccc;
}
.test .inner{
	background-color:#ccc;
}

使用父选择器

//利用父选择器运算符&是产生重复的类名
.test{
	&-one{
		color:red;
	}
	&-two{
		color:blue;
	}
	&-three{
		color:green;
	}
}
//编译后
.test-one{
	color:red;
}
.test-two{
	color:blue;
}
.test-three{
	color:green;
}

//&在选择器中多次出现，可以重复引用夫选择器而不重复
.test{
  & + & {
    color: red;
  }
  & & {
    color: green;
  }
  && {
    color: blue;
  }
  &, &hello {
    color: cyan;
  }
}
//编译后 
.test +.test{
  color: red;
}
.test .test{
  color: green;
}
.test.test{
  color: blue;
}
.test,.testhello {
  color: cyan;
}

更改选择器顺序

.test{
	.inner{
		color:#000;
		.box &{
		color:red;
		}
	}
}
//编译后
.test .inner{
		color:#000;
}
.box .test .inner{
		color:red;
}

组合爆炸

//& 也可用于生成逗号分隔列表中每个可能的选择器排列
p, a, ul, li {
	color:red;
  & + & {
    border-top: 0;
  }
}
//编译后
p,
a,
ul,
li {
  color:red;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
  border-top: 0;
}