HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

LESS - Extend 扩展

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

Less 扩展

扩展语法

扩展被放入规则集或附加到选择器。它类似于包含一个或多个类的伪类，这些类用逗号分隔。使用可选关键字 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 扩展

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

Sr.No. 类型 &描述
1 附加到选择器的扩展

扩展连接到选择器，它看起来类似于以选择器为参数的伪类。
2 扩展规则集内部

&:extend(selector) 语法可以放在规则集主体内。
3 扩展嵌套选择器

使用 extend 选择器匹配嵌套选择器。
4 使用 Extend 进行精确匹配

默认情况下，extend 会查找选择器之间的精确匹配。
5 第 n 个表达式

第 n 个表达式的形式在 extend 中很重要，否则，它会将选择器视为不同的。
6 扩展"all"

当关键字 all 在 extend 参数中最后被标识时，LESS 会将该选择器作为另一个选择器的一部分进行匹配。
7 使用扩展进行选择器插值

extend 可以连接到插值选择器。
8 在 @media 内进行范围界定/扩展

扩展仅匹配同一媒体内存在的选择器声明。
9 重复检测

无法检测选择器的重复。

以下是扩展的用例类型

Sr.No. 类型和描述
1 经典用例

经典用例用于避免在 LESS 中添加基类。
2 减少 CSS 大小

Extend 用于将选择器移动到您想要使用的属性;这有助于减少 css 生成的代码。
3 组合样式/更高级的混合

使用扩展，我们可以将特定选择器的相同样式组合到其他选择器中。
❮ 上一节 下一节 ❯