在LESS中，”extend”有什么用途

在LESS中，“extend”是一种功能，允许我们从一个选择器继承样式到另一个选择器。当我们在一个选择器中使用“extend”时，它会将该选择器的样式与与之匹配的其他选择器合并。

通过下面的示例理解它，这样你就能更清楚地了解LESS中“extend”功能的使用。

语法

用户可以按照以下语法在LESS中使用“extend”功能。

.selector1:extend(.selector2) {}
//The above block does the same thing as the below
.selector1{
   &:extend(.selector2);
}

在上述语法中，”.selector1″是将继承样式的选择器，”.selector2″是它将从中继承样式的选择器。当使用”extend”时，我们还可以使用”&”符号创建嵌套选择器。

在Less中使用”Extend”特性的不同方式

以下是我们可以使用LESS中的”extend”特性来简化和优化我们的CSS代码的一些不同技巧-

将Extend附加到选择器

将扩展附加到选择器允许我们将其附加到另一个选择器并合并。它就像一个普通的伪类，具有选择器作为参数。

以下是一些示例-

在现有选择器之后扩展选择器-

pre:hover:extend(div pre) {
   // styles
}

在现有的选择器和扩展之间使用空格 –

pre:hover :extend(div pre) {
   // styles
}

我们还可以在同一规则集内使用多个选择器来扩展样式，就像这样−

h1,
h2:extend(.title),
h3:extend(.title) {
}

扩展内部规则集

我们还可以在规则集内部使用”extend”，将一个选择器的属性扩展到另一个选择器上。例如：

.selector1 {
   color: red;
} 
.selector2 {
   &:extend(.selector1);
   background-color: yellow;
}

扩展嵌套选择器

使用 “extend” 时，我们可以使用 “&” 符号创建嵌套选择器。

在下面的示例中，嵌套选择器 “.selector1.nested” 被扩展为 “.selector2″。这样我们就可以在 “.selector2” 上继承 “.selector1” 和 “.nested” 的样式。

.selector1 {
   color: red;  
   &.nested {
      background-color: yellow;
   }
} 
.selector2:extend(.selector1.nested) {
   font-size: 16px;
}

准确匹配与样式扩展

使用CSS扩展时，重要的是要理解它只寻找选择器之间的确切匹配。换句话说，这些选择器需要具有相同的形式才能进行匹配，即使它们具有相同的意义。

例如，在以下CSS代码中：

.first.second,
.second.first,
.second > .first { 
   color: blue; 
}
// this will NOT match any of the selectors above
.my-test:extend(.second) {} *.second { color: blue; }
// this will NOT match the *.second selector
.no-star:extend(.second) {}a:hover:visited { color: blue; }
.my-selector:extend(a:visited:hover) {}

扩展“全部”

我们可以在Less中使用all关键字作为扩展参数的最后一部分，它告诉Less将选择器作为另一个选择器的一部分进行匹配。这将创建一个包含原始选择器匹配部分并用扩展替换的新选择器。

这里是一个示例 –

.selector1.selector2.test,
.test.selector1.selector3 {
   color: orange;
} 
.selector2.test {
   &:hover {
      color: green;
   }
} 
.selector4:extend(.test all) {}

示例1

在下面的示例中，我们定义了一个名为.button的按钮的基本样式，并使用“extend”功能来定义扩展基本样式的primary和danger按钮的特定样式。

.primary-button和.danger-button类继承了.button类中定义的所有样式，这有助于减少代码重复。此外，每个类都添加了自己的自定义样式以创建不同的按钮样式。

在输出中，用户可以观察到为.button定义的样式被.primary-button和.danger-button继承，并且应用了每个类定义的自定义样式。

// base style for a button
.button {
   background-color: blue;
   border: none;
   color: white;
   padding: 10px;
} 
//  specific style for a primary button by extending the base style
.primary-button:extend(.button) {
   background-color: green;
} 
//  specific style for a danger button by extending the base style
.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定义的样式被其他类继承，并根据需要进行自定义。

//style for a card
.card {
   background-color: white;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding: 20px;
} 
//  style for a large card by extending the base style
.large-card:extend(.card) {
   width: 500px;
} 
//style for a card with a header by extending the base style
.card-with-header:extend(.card) {
   border-top: 2px solid black;
   padding-top: 30px;
} 
// style for a card with a footer by extending the base style
.card-with-footer:extend(.card) {
   border-bottom: 2px solid black;
   padding-bottom: 30px;
} 
// style for a card with both a header and footer by extending the appropriate classes
.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代码更加有组织。