Less Extend

Extend 是 Less 的一个特性。 Extend 特性充当一个伪类，通过使用 :extend 选择器在一个选择器中扩展其他选择器的样式。

让我们举一个例子，看看在 Less 文件中使用 Extend。

创建一个名为 "simple.html" 的 HTML 文件，其中包含以下数据。

HTML 文件：simple.html

现在创建一个名为 "simple.less" 的文件。 它类似于 CSS 文件。 唯一的区别是它以 ".less" 扩展名保存。

Less 文件：simple.less

将 "simple.html" 和 "simple.less" 两个文件放在 Node.js 的根文件夹中

现在，执行以下代码：lessc simple.less simple.css

这将编译 "simple.less" 文件。 将生成一个名为 "simple.css" 的 CSS 文件。

例如

生成的 CSS "simple.css" 具有以下代码

输出

Extend 语法

它用于添加多个类。 Extend 放置在规则集或附加到选择器。 像伪类一样，它包含一个或多个类，这些类由逗号分隔。 每个选择器都可以使用可选的关键字 all。

让我们举个例子

HTML 文件：simple.html

Less 文件：simple.Less

将 "simple.html" 和 "simple.less" 两个文件放在 Node.js 的根文件夹中

现在，执行以下代码：lessc simple.Less simple.css

这将编译 "simple.Less" 文件。 将生成一个名为 "simple.css" 的 CSS 文件。

例如

生成的 CSS "simple.css" 具有以下代码

输出

Less 中使用的 extend 语法列表

Extend 的用例