在LESS中，extend有什么用途？

百变鹏仔 3个月前 (09-20) #CSS

文章标签有什么

在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代码的一些不同技术：

扩展附加到选择器

扩展附加到选择器上，允许我们将其附加到的选择器与另一个选择器合并。它类似于带有选择器参数的普通伪类。

这里有一些例子 -

在现有选择器之后扩展一个选择器 −

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

在现有的选择器和extend之间使用一个空格 -

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

我们还可以在同一个规则集中对多个选择器使用extend，就像这样−

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

扩展内部规则集

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

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

扩展嵌套选择器

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

在下面的示例中，使用"extend"将嵌套选择器".selector1.nested"扩展为".selector2"。这使得我们可以在".selector2"上继承".selector1"和".nested"的样式。

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

Exact Matching With Extend

当使用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) {}

扩展“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继承，并且每个类别定义的自定义样式被应用。

// 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代码更有组织性。

文章推荐

在LESS中，extend有什么用途？

语法

在Less中使用"Extend"特性的不同方法

扩展附加到选择器

扩展内部规则集

扩展嵌套选择器

Exact Matching With Extend

扩展“all”

示例1

输出

示例2

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写