LESS 中的"extend"有什么用?
在 LESS 中，"extend"功能允许我们将一个选择器的样式继承到另一个选择器。当我们在选择器中使用"extend"时，它会将该选择器的样式与任何与其引用的选择器匹配的其他选择器的样式合并。
让我们通过以下示例来理解它。这样您就可以更清楚地了解 LESS 中"extend"功能的使用方法。
语法
用户可以按照以下语法在 LESS 中使用"extend"功能。
.selector1:extend(.selector2) {}
//上面的代码块与下面的代码块作用相同
.selector1{
&:extend(.selector2);
}
在上述语法中，".selector1"是将继承样式的选择器，".selector2"是它将继承自的选择器。使用"extend"时，我们也可以使用"&"符号创建嵌套选择器。
在 Less 中使用"extend"功能的不同方法
以下是一些我们可以结合使用 LESS 中"extend"功能来简化和优化 CSS 代码的不同技巧 -
附加到选择器的扩展
附加到选择器的扩展允许我们将它所附加的选择器与另一个选择器合并。它就像一个带有选择器作为参数的普通伪类。
以下是一些示例 -
在现有选择器之后扩展一个选择器 -
pre:hover:extend(div pre) {
// 样式
}
在现有选择器和扩展之间使用空格 -
pre:hover :extend(div pre) {
// 样式
}
我们也可以在同一规则集中对多个选择器使用扩展，如下所示 -
h1,
h2:extend(.title),
h3:extend(.title) {
}
在规则集内扩展
我们还可以在规则集中使用"extend"将一个选择器的属性扩展到另一个选择器。例如 -
.selector1 {
color: red;
}
.selector2 {
&:extend(.selector1);
background-color: yellow;
}
扩展嵌套选择器
使用"extend"时，我们可以使用 "&" 符号创建嵌套选择器。
在下面的例子中，嵌套选择器".selector1.nested"使用"extend"扩展为".selector2"。这使得我们可以在".selector2"上继承".selector1"和".nested"的样式。
.selector1 {
color: red;
&.nested {
background-color: yellow;
}
}
.selector2:extend(.selector1.nested) {
font-size: 16px;
}
使用 Extend 进行精确匹配
使用 CSS 扩展时，务必理解它会在选择器之间寻找精确匹配。换句话说，即使选择器含义相同，它们也需要具有相同的形式才能匹配。
例如，在以下 CSS 代码中 -
.first.second,
.second.first,
.second > .first {
color: blue;
}
// 这将不会匹配上述任何选择器
.my-test:extend(.second) {} *.second { color: blue; }
// 这将不会匹配 *.second 选择器
.no-star:extend(.second) {}a:hover:visited { color: blue; }
.my-selector:extend(a:visited:hover) {}
扩展"all"
我们可以在 Less 中使用 all 关键字作为扩展参数的最后一部分，它告诉 Less 将选择器作为另一个选择器的一部分进行匹配。这将创建一个新的选择器，其中包含原始选择器匹配的部分，并将其替换为扩展部分。
以下是示例 -
.selector1.selector2.test,
.test.selector1.selector3 {
color: orange;
}
.selector2.test {
&:hover {
color: green;
}
}
.selector4:extend(.test all) {}
示例 1
在下面的示例中，我们使用 .button 类为按钮定义了一个基本样式，然后使用"extend"功能通过扩展该基本样式为主按钮和危险按钮定义特定样式。
.primary-button 和 .danger-button 类继承了 .button 类中定义的所有样式，这有助于减少代码重复。此外，每个类都添加了自己的自定义样式，以创建不同的按钮样式。
在输出中，用户可以观察到 .button 定义的样式被 .primary-button 和 .danger-button 继承，并且每个类定义的自定义样式都得到了应用。
// 按钮的基本样式
.button {
background-color: blue;
border: none;
color: white;
padding: 10px;
}
// 通过扩展基本样式为主按钮添加特定样式
.primary-button:extend(.button) {
background-color: green;
}
// 通过扩展基本样式为危险按钮添加特定样式
.danger-button:extend(.button) {
background-color: red;
}
输出
.button {
background-color: blue;
border: none;
color: white;
padding: 10px;
}
.primary-button {
background-color: green;
}
.danger-button {
background-color: red;
}
示例 2
在下面的示例中，我们用 .card 类为卡片定义了一个基本样式。然后，我们使用"extend"功能为大卡片、带页眉的卡片、带页脚的卡片以及同时带页眉和页脚的卡片定义特定的样式。
在输出中，用户可以观察到为 .card 定义的样式被其他类继承，并根据需要进行自定义。
//卡片样式
.card {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
padding: 20px;
}
// 通过扩展基础样式，为大卡片添加样式
.large-card:extend(.card) {
width: 500px;
}
// 通过扩展基础样式，为带页眉的卡片添加样式
.card-with-header:extend(.card) {
border-top: 2px solid black;
padding-top: 30px;
}
// 通过扩展基础样式，为带页脚的卡片添加样式
.card-with-footer:extend(.card) {
border-bottom: 2px solid black;
padding-bottom: 30px;
}
// 通过扩展相应的类，为同时包含页眉和页脚的卡片添加样式
.card-with-header-and-footer:extend(.card-with-header, .card-with-footer) {
}
输出
.card {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.large-card {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 500px;
}
.card-with-header {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
padding: 20px;
border-top: 2px solid black;
padding-top: 30px;
}
.card-with-footer {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
padding: 20px;
border-bottom: 2px solid black;
padding-bottom: 30px;
}
.card-with-header-and-footer {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
padding: 20px;
border-top: 2px solid black;
padding-top: 30px;
border-bottom: 2px solid black;
padding-bottom: 30px;
}
用户了解了 LESS 中"extend"功能的语法，以及使用"extend"简化和优化 CSS 代码的各种技巧。通过利用此功能并遵循 CSS 代码优化的最佳实践，用户可以避免为相似的样式编写重复的代码，并使 CSS 代码更加井井有条。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
