less学习系列之extend继承

系列文章目录

一：Less学习系列之extend继承
二：Less学习系列之Mixins混合
三：Less学习系列之匹配模式（Mixins混合的一种形式）

---

---

一、extend的初步理解

extend是less语法的一个伪类 用来继承匹配的样式集
A:extend(B)是基本的使用形式，代表将B中的样式集拿到A的样式集中

二、extend的使用形式

1. 选择器或样式集中使用

/*less代码*/
.wrap{
    color:red;
}
.container{
	font-size:12px;
}
/*使用形式1 样式集*/
.inner{
    &:extend(.wrap);
    background-color:#f40;
}
/*使用形式2 选择器（选择器和extend之间可以存在空格）*/
.inner:extend(.wrap){
    background-color:#f40;
}
.inner :extend(.wrap){
    background-color:#f40;
}

/*编译后的代码*/
.wrap,
.inner{
    color:red;
}
.inner{
    background-color:#f40;
}

选择器与样式集这两种形式基本是一致的，只不过样式集中使用了&，它是less的一个嵌套规则，代指本身。

2. 继承多个样式类

.wrap {
  color: red;
}
.container{
   font-size:20px; 
}
.inner{
  &:extend(.wrap,.container);
  /*等效于以下形式*/
  &:extend(.wrap):extend(.container);
}

一个样式集中可以继承多个类，多个类之间以’，'隔开，形如A:extend(B,C)

/*编译后的代码*/
.wrap,
.inner {
  color: red;
}
.container,
.inner {
  font-size: 20px;
}

3. 继承目标类的嵌套结构

.wrap {
	color: red;
	.container{
		font-size:20px; 
	}
	.inner{
		font-weight:bold;
	}
}
.wrap1:extend(.wrap){
	background-color:#f40;
}
.wrap1:extend(.wrap all){
	background-color:#f40;
}

默认情况下，继承指定类名的样式集，只会继承自身的样式，不会继承其子元素的结构和样式，如果想要嵌套继承，需要使用all关键字来实现，形如A:extend(B all)

/*没有使用all的情况 wrap1只集成了color样式*/
.wrap,
.wrap1 {
  color: red;
}
.wrap .container {
  font-size: 20px;
}
.wrap .inner {
  font-weight: bold;
}
.wrap1 {
  background-color: #f40;
}

/*使用all的情况 wrap1集成了wrap以及其子元素container和inner的所有样式*/
.wrap,
.wrap1 {
  color: red;
}
.wrap .container,
.wrap1 .container {
  font-size: 20px;
}
.wrap .inner,
.wrap1 .inner {
  font-weight: bold;
}
.wrap1 {
  background-color: #f40;
}

三、extend使用时的注意点

1. 选择器可以使用多个类名，但是如果想使用extend集成样式集，那么extend伪类必须放在最后一个

.myHover{
	background-color:#fff;
	color:#409eff;
}
/*正确的顺序*/
div:nth-child(1):hover:extend(.myHover){
	font-size:12px;
}
/*错误的顺序 */
div:nth-child(1):extend(.myHover):hover{
	font-size:12px;
}

上图是错误的排放顺序，编译less时的错误信息

2. A:extend(B)中B的格式是选择器，可以是.className，可以是#idName,也可以是div > img这种形式。但是不可以使用变量的形式，比如以下格式

@selector:.content;
.wrap:extend(@{selector}){
	color:red;
}