教程 > LESS 教程 > Less 特征 阅读：30

LESS 扩展 Extend

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

示例

下面的例子演示了LESS文件中扩展 Extend 的使用

extend_syntax.html

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
            <title>迹忆客(jiyik.com) - LESS 扩展 Extend</title>
   </head>

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

现在创建 style.less 文件。

style.less

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

.style {
   background: green;
}

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

$ lessc style.less style.css

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

style.css

h2 {
  font-style: italic;
}
.style,
h2 {
  background: green;
}

按照以下步骤查看上述代码的工作原理

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

Less 扩展 Extend

Extend 语法

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

示例

下面的例子演示了LESS文件中 Extend 语法的使用

extend_syntax.html

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
            <title>迹忆客(jiyik.com) - LESS 扩展 Extend</title>
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to 迹忆客</h2>
         <p>Hello!!!!!</p>
      </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.html 文件中。
  • 在浏览器中打开此 HTML 文件，将显示以下输出。

Less 扩展语法

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

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

以下是扩展用例的类型

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

查看笔记

扫码一下
查看教程更方便