less笔记-继承（Extend）

- 日理万妓 2022-09-25 15:23 557阅读 0赞

**一、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：**