srcmini本文概述
扩展是Less的功能。扩展功能充当伪类, 通过使用以下方法在一个选择器中扩展其他选择器的样式：
让我们举个例子来看一下Less文件中的扩展。
创建一个名为” simple.html”的HTML文件, 其中包含以下数据。
HTML档案：simple.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="simple.css" type="text/css" />
</head>
<body>
<h2>Less Extend Example</h2>
<h3>Welcome to srcmini</h3>
</body>
</html>现在创建一个名为” simple.less”的文件。它类似于CSS文件。唯一的区别是它以” .less”扩展名保存。
Less的文件：simple.less
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: lightgreen;
}将文件” simple.html”和” simple.less”都放在Node.js的根文件夹中
现在, 执行以下代码：lessc simple.less simple.css
这将编译” simple.less”文件。将生成一个名为” simple.css”的CSS文件。
例如：
生成的CSS” simple.css”具有以下代码：
h2 {
font-style: italic;
}
.style, h2 {
background: lightgreen;
}输出
扩展语法
它用于添加多个类。扩展放置在规则集中或附加到选择器。与伪类一样, 它包含一个或多个用逗号分隔的类。每个选择器后面都可以使用可选关键字all。
让我们举个例子：
HTML档案：simple.html
<!DOCTYPE html>
<!doctype html>
<head>
<link rel="stylesheet" href="simple.css" type="text/css" />
</head>
<body>
<div class="style">
<h2>Welcome to srcmini</h2>
<div class="container">
<p> A solution of all technology.</p>
</div>
</div>
</body>
</html>Less的文件：simple.Less
.style:extend(.container, .img)
{
background: violet;
}
.container {
font-style: italic;
}
.img{
font-size: 30px;
}将文件” simple.html”和” simple.less”都放在Node.js的根文件夹中
现在, 执行以下代码：lessc simple.Less simple.css
这将编译” simple.Less”文件。将生成一个名为” simple.css”的CSS文件。
例如：
生成的CSS” simple.css”具有以下代码：
.style {
background: violet;
}
.container, .style {
font-style: italic;
}
.img, .style {
font-size: 30px;
}输出
Less中使用的扩展语法列表
| Index | Type | Description |
|---|---|---|
| 1) | 扩展附加到选择器 | Extend连接到一个选择器, 看起来像一个以选择器作为参数的伪类。 |
| 2) | 扩展内部规则集 | 可以将＆：extend(selector)语法放在规则集的主体内。 |
| 3) | 扩展嵌套选择器 | 嵌套选择器使用扩展选择器进行匹配。 |
| 4) | 精确匹配与扩展 | 默认情况下, 这用于选择器之间的精确匹配。 |
| 5) | nth Expression | 否则, 将在扩展中使用第n个表达式的形式。没有此表达式, 它将选择器视为不同。 |
| 6) | 扩展”全部” | 最后在extend参数中标识了关键字all, 然后Less与该选择器匹配, 成为另一个选择器的一部分。 |
| 7) | 带扩展的选择器插值 | 用于连接到插补选择器。 |
| 8) | 在@media范围内/扩展 | 它扩展匹配仅在同一媒体声明中存在的选择器。 |
| 9) | Duplication Detection | 它无法检测到选择器的重复。 |
扩展用例
| Index | Type | Description |
|---|---|---|
| 1) | 经典用例 | 经典用例用于避免在Less中添加基类。 |
| 2) | LessCSS大小 | 扩展语法使选择器远离要使用的属性, 这有助于LessCSS生成的代码。 |
| 3) | 组合样式/更高级的混音 | 它用于将特定选择器的相同样式组合到其他选择器中。 |
评论前必须登录！
注册