less 继承语法

less 继承

• less继承方便代码模块化
• 继承不支持带参数
• 如社区公共头部与尾部

语法： 获得继承名：extend（继承部分名）{…}

代码：

less

.jicheng{
    width: auto;
    height: 50%;
    text-align: center;
    background: aqua;
}
.header:extend(.jicheng){
  /*header自身代码*/
  padding: 0 auto;
}

css

.jicheng,
.header {
  width: auto;
  height: 50%;
  text-align: center;
  background: aqua;
}
.header {
  /*header自身代码*/
  padding: 0 auto;
}

继承所有状态（如伪类选择器）

语法： 获得继承名：extend（继承部分名 all）{…}
代码

less

.jicheng{
    width: auto;
    height: 50%;
    text-align: center;
    background: aqua;
}
.jicheng:hover{
  background: red;
}

/*没有加all*/
.header:extend(.jicheng){}
/*加入all*/
.footer:extend(.jicheng all){};

css

.jicheng,
.header,
.footer {
  width: auto;
  height: 50%;
  text-align: center;
  background: aqua;
}
.jicheng:hover,
.footer:hover {
  background: red;
}
/*没有加all*/
/*加入all*/