Less学习--嵌套、extend继承

嵌套

less允许标签嵌套

//pre's css
.head_group div.nav_list ul{
	overflow: hidden; 
}

.head_group div.nav_list ul	li{
	float: left;
}

//now's less 
//结构代码更加简洁 模仿了HTML结构
.head_group{
	div.nav_list{
		ul{
			overflow: hidden; 
			li{
				float: left;
			}

			&:hover{
				//也可以使用伪类选择器与Mixin搭配
				background-color: red; 
			}
		}
	}
}

extend继承

extend允许继承css集，但不允许继承带参数的css类

.inline{
	color: #fff;
}

.outbar{
	font-size: 18px;
}

nav ul{
	&:extend(.inline);
	background:blue;
}
//extend可以放在css集中，也可以放在标签名后面
//但会造成重复继承(出现两次)
nav div:extend(.inline){};
//放在标签名后面时必须加上{}

准确匹配和模糊匹配

extend中有一个参数all，是用来开启模糊匹配的
例如nav div:extend(.inline all){};
将会匹配.(#)x.inline .inline.(#)x 默认是关闭的(即默认是准确匹配)

允许多个继承

nav article:extend(.inline,.outba,…){};

extend继承伪类选择器

1、在选择器之后扩展：pre:hover:extend(div pre)
2、选择器和扩展之间允许有空格：pre:hover :extend(div pre)
3、允许多个扩展：pre:hover:extend(div pre):extend(.bucket tr)
				请注意:
					这与pre:hover:extend(div pre, .bucket tr)是相同的作用
4、这是不允许的：pre:hover:extend(div pre).nth-child(odd)。:extend必须是最后一个

extend嵌套选择器

.bucket{
	tr{
		color: blue;
	}
}
.some-class:extend(.bucket tr){};//这里只能用空格分隔
//不能用>表示

父类选择器 &

.bucket{
	tr &{ //将父类选择器放在标签后，可以将tr提到根目录的位置
		color: purple;
	}
}
.some-class:extend(tr .bucket){};
//但是没有办法超越@media指令
@media screen{
	.bucket{
		tr &{ 
			color: purple;
		}
	}
}

伪类的顺序确实很重要

选择器link:hover:visited和link:visited:hover匹配相同的元素集
但extend将它们视为不同的元素

link:hover:visited {
  color: blue;
}
link:visited:hover{
  color: red;
}
.selector:extend(link:visited:hover){};

属性选择器中的引用类型无关紧要。以下所有都是等效的。

[title=identifier] {
  color: blue;
}
[title='identifier'] {
  color: green;
}
[title="identifier"] {
  color: red;
}
.noQuote:extend([title=identifier]) {};
.singleQuote:extend([title='identifier']) {};
.doubleQuote:extend([title="identifier"]) {};

继承中的选择器允许是插值

.bucket {
  color: blue;
}
.some-class:extend(@{variable}){};
@variable: .bucket;

但选择器不允许是插值定义

@variable: .bucket;
@{variable} { 
  color: blue;
}
.some-class:extend(.bucket){};

但可以把插值定义定义成一个插值继承

.bucket {
  color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;

在@media声明中编写的扩展应该只与同一@media声明中的选择器匹配

@media print {
  .screenClass:extend(.selector) {} 
  .selector { 
    color: black;
  }
  @media (min-width: 1023px) {
  	//在@media声明中编写的extend与嵌套声明中的选择器不匹配：
    .selector {  
        color: blue;
    }
  }
}
.selector { 
  color: red;
}
@media screen {
  .selector {  
    color: blue;
  }
}
//全局extend匹配所有内容,包括嵌套在@media中的选择器
.topLevel:extend(.selector){};

多重继承

.apick{
background:red;
}
.bpick{
background:yellow;
}
.cpick{
background:green;
}
.dpick{
&:extend(.apick,.bpick,.cpick);
background:pink; //最新一次继承的是什么就是什么
}