Less嵌套规则（4）

嵌套规则

嵌套规则它模仿了HTML的结构，让我们的css代码更加简洁明了清晰

实例：
传统CSS写法

#header{
	color:black;
}
#header .navigation{
	font-size:12px;
}
#header .logo{
	width:300px;
}

less中的写法

#header{
	color:black;
	.navigation{
		font-size:12px;
	}
	.logo{
		width:300px;
	}
}

父元素选择器&

说明：符合&表示当前选择器的父选择器

例子：
less写法

.bgcolor{
	background:#ffffff;
	a{
		color:#888888;
		&:hover{
			color:#ff6600;
		}
	}
}

less编译结果

.bgcolor{
	background:#ffffff;
}
.bgcolor a{
	color:#888888;
}
.bgcolor a:hover{
	color:#ff6600;
}

改变选择器的顺序

说明：将&放到当前选择器之后，就会将当前选择器插入到所有的父选择器之前

例子：
less写法

ul{
	li{
		.conter &{
			background:mediumvioletred;
		}
	}
}

less编译结果

.conter ul li{
	background:mediumvioletred;
}

组合使用生成所有可能的选择器列表

说明：使用两个& &
例子：
less写法

p,a,ul,li {
	border-top:2px dotted #336;
	& &{
		border-top 0;
	}
}

less编译结果

p,a,ul,li{
	border-top:2px dotted #336;
}
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;
}