📜  LESS-扩展

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


 

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

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

extend_syntax.htm


   

   
      

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文件-

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

输出

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

  • 将上面的html代码保存在extend_syntax.htm文件中。
  • 在浏览器中打开此HTML文件,将显示以下输出。

延伸少

扩展语法

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

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

extend_syntax.htm


   

   
      

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.css

.style {
   background: #BF70A5;
}

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

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

输出

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

  • 将上面的html代码保存在extend_syntax.htm文件中。
  • 在浏览器中打开此HTML文件,将显示以下输出。

延伸少

下表列出了可以在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.