less笔记-继承（Extend）

一、Extend Syntax（语法）

说明：The extend is either attached to a selector or placed into a ruleset. It looks like a pseudoclass with selector parameter optionally followed by the keyword。

继承被附在选择器后面或放置在规则集（即具体定于样式处），它看起来就像是一个在关键字extend后具有可选参数的伪类（pseudoclass）。

.parentClass{
	color:red;
}
.subClassOne{
	&:extend(.parentClass);
}
.subClassTwo:extend(.parentClass){
	
}

编译为：

.parentClass,
.subClassOne,
.subClassTwo {
  color: red;
}

二、深入了解

除了上面的基本语法外，less继承也支持CSS 的选择器分组等更多用法。

1、继承嵌套（nested）选择器

.parentClass{
	span{
		color:red
	}
}
.subClassOne{
	&:extend(.parentClass span);
}

编译为：

.parentClass span,
.subClassOne {
  color: red;
}

2、精确匹配（exactly matching）

Less中，关键字extend里面的选择器必须与已定义的样式选择器严格一致，如div .a{}样式只能通过extend（div .a）继承，而不能是extend（.a），尽管这两者在CSS中并没太多区别。例：

.a.class,
.class.a,
.class > .a {
 	color: blue;
}
.test:extend(.class) {} // this will NOT match the any selectors above

编译将提示：extend '.class' has no matches错误。此外，通配符也不能用于此情况。

3、extend的选择器替代问题

此处即针对《less笔记-变量》文中选择器名字被变量替代的情况。只需extend继承的选择器名不包含变量，或在被参考的地方不是变量即可。

@myClass:.redColor;

@{myClass}{
	color:red;
}
.class{
	color:red;
}
.subClass:extend(.redColor){}	//extend参考的选择器名在参考处为变量，错误
.subClass:extend(@{myClass}){}	//extend内选择器名为变量，错误。
@myClass:extend(.class){}		//不是上面两种情况，无错。

4、媒体查询@media内的继承范围（scope）问题

同一个媒体查询（@media）内可被继承，

@media print {
 	.screenClass:extend(.selector) {} // extend inside media
  	.selector { // this will be matched - it is in the same media
    	color: black;
  	}
}
.selector { // ruleset on top of style sheet - extend ignores it
  	color: red;
}
@media screen {
  	.selector {  // ruleset inside another media - extend ignores it
    	color: blue;
  	}
}

编译为：

@media print {
  .selector,
  .screenClass {
    color: black;
  }
}
.selector {
  color: red;
}
@media screen {
  .selector {
    color: blue;
  }
}

说明：并非内外部优先级问题，实际编译可知，若将媒体查询print内部的.selector去掉，仍然无法继承外部的.selector。

5、Duplication（重复）问题

.class1,.class2{
	color:red;
}
.class3:extend(.class1,.class2){}

注意：class1与class2是用逗号隔开，属于分组查询，所有不会有上面的第2条。编译为：

.class1,
.class2,
.class3,
.class3 {
  color: red;
}

可见继承于分组选择器将是每个都单独继承。对于此处class1与class2完全一样的情况，extend内只写一个即可，不存在匹配问题。

三、继承的经典使用情况

extend的经典使用情况在于，用于减少基类的使用。

如：现在有个默认字体样式类baseStyle，此外有个与baseStyle稍有差别的类specialStyle。则使css较少的css与html分别可为：

css：

.baseStyle{
	color:gray;
	font-weight:500;
}
.specialStyle{
	color:blue;
}

html：

<p class="baseStyle">我是默认的段落样式</p>
<p class="baseStyle specialStyle">我是默认样式上加了特殊样式的段落</p>

而思路相同，却更好的做法是使用Less的继承：

.baseStyle{
	color:gray;
	font-weight:500;
}
.specialStyle:extend(.baseStyle){
	color:blue;
}

效果虽一样，但使用less将使html结构信息更加直观，也更便于日后修改。

四、个人理解

继承实际上是将当前的选择器名以分组形式添加到被继承的选择器处，所以当既有继承又有自身样式时，应注意被继承的选择器的位置。

情况一：被继承的选择器在前面

.parentClass{
	color:red;
}
.subClass{
	color:blue;
	&:extend(.parentClass);
	border:1px solid blue;
}

编译结果，与预期一致，使用了自身的特殊color：

.parentClass,
.subClass {
  color: red;
}
.subClass {
  color: blue;
  border: 1px solid blue;
}

情况二：被继承的选择器在后面

.subClass{
	color:blue;
	&:extend(.parentClass);
	border:1px solid blue;
}
.parentClass{
	color:red;
}

编译结果，因为位置原因，与预期不一致，此时此例中继承没达到目的：

.subClass {
  color: blue;
  border: 1px solid blue;
}
.parentClass,
.subClass {
  color: red;
}