LESS - 扩展

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

示例

以下示例演示了在 LESS 文件中使用 extend：

extend_syntax.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 文件。

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 文件，将显示以下输出。

Extend 语法

Extend 可以放在规则集中或附加到选择器上。它类似于一个伪类，包含一个或多个类，这些类以逗号分隔。可以使用可选关键字 all 作为每个选择器的后缀。

示例

以下示例演示了在 LESS 文件中使用 extend 语法：

extend_syntax.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.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 中使用的所有类型的 extend 语法：

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

以下是 Extend 的用例类型

序号	类型及说明
1	经典用例经典用例用于避免在 LESS 中添加基类。
2	减小 CSS 大小 Extend 用于将选择器移动到您想要使用的属性尽可能远的地方；这有助于减少生成的 CSS 代码。
3	组合样式/更高级的 Mixin 使用 extend，我们可以将特定选择器的相同样式组合到其他选择器中。

打印页面