LESS - 扩展

Extend 是一个 LESS 伪类，它通过使用:extend选择器扩展一个选择器中的其他选择器样式。

例子

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

扩展语法.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

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

无风格

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

.style {
   background: green;
}

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

lessc style.less style.css

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

样式.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

输出

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

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

扩展语法

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

例子

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

扩展语法.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

现在创建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文件 -

样式.css

.style {
   background: #BF70A5;
}

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

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

输出

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

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

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

先生。	类型和描述
1	扩展附加到选择器 Extend 连接到一个选择器，该选择器看起来类似于以选择器作为参数的伪类。
2	扩展内部规则集 &:extend(selector)语法可以放在规则集主体内。
3	扩展嵌套选择器嵌套选择器使用扩展选择器进行匹配。
4	与扩展的精确匹配默认情况下，extend会查找选择器之间的精确匹配。
5	第 n 个表达式第 n 个表达式的形式在扩展中很重要，否则它会将选择器视为不同的。
6	延伸“全部” 当关键字all最后在扩展参数中被识别时，LESS 会将该选择器作为另一个选择器的一部分进行匹配。
7	带扩展的选择器插值扩展可以连接到内插选择器。
8	范围/扩展@media内部 Extend 仅匹配同一媒体声明中存在的选择器。
9	重复检测它无法检测选择器的重复。

以下是 Extend 的用例类型

先生。	类型和描述
1	经典用例使用经典用例来避免在 LESS 中添加基类。
2	减小 CSS 大小 Extend 用于将选择器移动到您要使用的属性处；这有助于减少 CSS 生成代码。
3	组合风格/更高级的 Mixin 使用扩展，我们可以将特定选择器的相同样式组合到其他选择器中。