扩展是一个 LESS 伪类，它通过扩展其他选择器样式在一个选择器使用 :extend 选择器。
示例
下面的例子演示了在LESS文件使用扩展：
extend_syntax.html
<!doctype html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="style">
<h2>Welcome to zaixian zaixian</h2>
<p>Hello, You guys!</p>
</div>
</body>
</html>
接下来，创建文件 style.less
style.less
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
你可以编译extend.less文件使用以下命令来生成extend.css：
lessc extend.less extend.css
接着执行上面的命令，它会自动创建 style.css文件，下面的代码：
style.css
h2 {
font-style: italic;
}
.style,
h2 {
background: blue;
}
输出结果
让我们来执行以下步骤，看看上面的代码工作：
-
保存上面的HTML代码在 extend_syntax.html文件。
-
在浏览器中打开该HTML文件，得到如下输出显示。
扩展语法
扩展放入规则集或连接到一个选择器。它类似于包含一个或多个类，它们是由逗号分隔的伪类。使用可选的关键字all，每个选择器可以这样遵循。
示例
下面的例子演示了使用 LESS 文件的扩展语法：
extend_syntax.html
<!doctype html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="style">
<h2>Welcome to zaixian zaixian</h2>
<div class="container">
<p>Hello, You guys!</p>
</div>
</div>
</body>
</html>
接下来，创建文件 style.less
style.less
.style:extend(.container, .img)
{
background: #BF70A5;
}
.container {
font-style: italic;
}
.img{
font-size: 30px;
}
你可以编译 style.less 文件使用以下命令来生成 style.css 文件：
lessc style.less style.css
接着执行上面的命令，它会自动创建 style.css文件，下面的代码：
style.css
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 30px;
}
输出结果
让我们来执行以下步骤，看看上面的代码工作：
-
保存上面的HTML代码在 extend_syntax.html文件。
-
在浏览器中打开该HTML文件，得到如下输出显示。
下表列出了扩展语法，您可以在LESS 使用它的所有类型：
| S.N. |
类型和说明
|
|---|---|
| 1 |
扩展连接到一个选择器，类似于具有选择器作为参数的伪类。
|
| 2 |
扩展内部规则集
&:extend延长(选择器)语法可以在规则集主体里面放。
|
| 3 |
扩展嵌套选择器
嵌套选择器使用扩展选择器匹配。
|
| 4 |
使用扩展精确匹配
默认情况下扩展外观选择器之间的精确匹配。
|
| 5 |
nth表达式
第n个表达式的形式在某种程度上很重要，否则，它对待选择器将不同。
|
| 6 |
扩展"all"
当关键字 all 被最后确定在扩展参数，那么LESS匹配选择器作为另一个选择器部分。
|
| 7 |
选择器插值扩展
在多大程度上可以被连接到内插选择器。
|
| 8 |
作用域及扩展@media
扩展匹配选择器只存在相同的媒体声明中。
|
| 9 |
重复检测
它不能检测选择器的重复。
|
下面是扩展类型的用例：
| S.N. |
类型和说明
|
|---|---|
| 1 |
经典用例
在Less中经典的用例是用来避开添加基类。
|
| 2 |
减小CSS大小
扩展用于移动选择器尽量要使用属性，这有助于降低CSS生成代码。
|
| 3 |
合并风格/更高级的混入
使用扩展我们可以结合特定选择器相同的风格到其他选择器。
|
上一篇：
Less重复检测
下一篇：
Less不输出混合类型