LESS-扩展 - 芒果文档

📌 相关文章

📜 LESS-扩展

📅 最后修改于: 2020-10-22 07:08:08 🧑 作者: Mango

Extend是一个LESS伪类，它使用：extend选择器在一个选择器中扩展其他选择器样式。

例

以下示例演示了LESS文件中extend的使用-


   

   
      
         Welcome to TutorialsPoint
         Hello!!!!!

接下来，创建style.less文件。

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

您可以使用下面的命令编译extend.less文件extend.css –

lessc style.less style.css

执行以上命令；它将使用以下代码自动创建style.css文件-

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

请按照以下步骤查看上面的代码如何工作-

延伸少

扩展放置在规则集中或附加到选择器。它类似于包含一个或多个用逗号分隔的类的伪类。使用可选关键字all ，可以遵循每个选择器。

以下示例演示了LESS文件中扩展语法的使用-


   

   
      
         Welcome to TutorialsPoint
         
         
            Hello!!!!!

现在创建style.less文件。

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

您可以使用以下命令将style.less文件编译为style.css-

lessc style.less style.css

执行以上命令；它将使用以下代码自动创建style.css文件-

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

请按照以下步骤查看上面的代码如何工作-

延伸少

下表列出了可以在LESS中使用的所有扩展语法类型-

Sr.No.	Types & Description
1	Extend Attached to Selector Extend is connected to a selector which looks similar to a pseudo class with selector as parameter.
2	Extend Inside Ruleset The &:extend(selector) syntax can be put inside the body of ruleset.
3	Extending Nested Selectors Nested selectors are matched using the extend selector.
4	Exact Matching with Extend By default, extend looks for the exact match between the selectors.
5	nth Expression The form of nth expression is important in extend otherwise, it treats selector as different.
6	Extend “all” When the keyword all is identified at last in the extend argument then LESS matches that selector as part of another selector.
7	Selector Interpolation with Extend The extend can be connected to interpolated selector.
8	Scoping/Extend inside @media Extend matches the selector only that is present inside the same media declaration.
9	Duplication Detection It cannot detect the duplication of selectors.

以下是扩展用例的类型

Sr.No.	Types & Description
1	Classic Use Case Classic use case is used to avoid adding the base class in LESS.
2	Reducing CSS Size Extend is used to move the selector as far as the properties you want to use; this helps in reducing the css generated code.
3	Combining Styles/ A More Advanced Mixin Using extend we can combine the same styles of a particular selectors into other selector.