在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”功能来简化和优化我们的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; }
当使用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) {}
在下面的示例中,我们定义了一个基本样式,用于具有类名.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; }
在下面的示例中,我们为具有类名.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有什么用途?的详细内容,更多请关注php中文网其它相关文章!
已抢65154个
抢已抢28653个
抢已抢15512个
抢已抢7797个
抢已抢9717个
抢已抢19739个
抢