Less的简单使用（三）——extend的用法

Less的简单使用（三）——Extend的用法

Extend是一个Less伪类，通过:extend在一个选择器中扩展其他选择器样式，从而与匹配其引用的选择器合并。

一、Extend的简单使用

.less文件中的代码：

// Extend
nav ul {
    &:extend(.line);
    background-color: lightgray;
}
.line {
    color: maroon;
}

.css文件中对应的css代码：

nav ul {
  background-color: lightgray;
}
.line,
nav ul {
  color: maroon;
}

在上述设定的规则中，只要.line这个选择器出现，:extend将会把nav ul应用到.line上

二、Extend语法

extend可以附加到选择器，也可以放置在规则集中

// Extend Syntax
.a:extend(.f){}
.b {
    &:extend(.g);
} //两种语法都可以实现对选择器的Extend
.c:extend(.f all) {} //加了关键字all,可以匹配所有带有".f"的选择器，eg:".f.x"
.c:extend(.f, .g) {} //可以包含一个或者多个要扩展的类
.f {
    height: 30px;
}
.g {
    color: green;
}
.f.x {
    padding: 10px;
}

.css文件中对应的css代码：

.f,
.a,
.c,
.c {
  height: 30px;
}
.g,
.b,
.c {
  color: green;
}
.f.x,
.c.x {
  padding: 10px;
}

三、Extend附加到选择器

一个选择器可以包含多个extend子句，但是所有扩展都必须在选择器的末尾，任何一个选择器都可以具有extend关键字：

注：1)、是在选择器之后扩展：eg、 .big-division:extend(.f);

2)、选择器和extend之间允许有空格：eg、.big-division :extend(.f);

3)、允许多个扩展，eg、.big-division:extend(.f):extend(.g）;也可以写成： .big-division:extend(.f , .g);

4)、扩展必须是最后一个，eg、.big-division:extend(.f).nth-child(odd)

.less文件中的代码：

// Extend Attached to Selector
.big-division ,
.big-bag:extend(.f),
.big-bucket:extend(.g) {
    float: left;
}
.f {
    height: 30px;
}
.g {
    color: green;
}

.css文件中对应的css代码：

.f,
.big-bag {
  height: 30px;
}
.g,
.big-bucket {
  color: green;
}
.big-division,
.big-bag,
.big-bucket {
  float: