延伸少

扩展是Less的功能。扩展功能充当伪类，通过使用以下方法在一个选择器中扩展其他选择器的样式：

让我们以一个示例来看一下Less文件中的扩展。

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

HTML档案：simple.html

 


 
Less Extend Example
 
Welcome to JavaTpoint

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

更少的文件：simple.less

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

将文件“ simple.html”和“ simple.less”都放在Node.js的根文件夹中

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

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

例如：

生成的CSS“ simple.css”具有以下代码：

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

输出：

扩展语法

它用于添加多个类。扩展放置在规则集中或附加到选择器。与伪类一样，它包含一个或多个用逗号分隔的类。每个选择器后面都可以使用可选关键字all。

让我们举个例子：

HTML档案：simple.html

   


   

    
Welcome to JavaTpoint
    

      
 A solution of all technology.
    
   

更少的文件：simple.Less

.style:extend(.container, .img)
{
  background: violet;
}
.container {
  font-style: italic;
}
.img{
   font-size: 30px;
 }

将文件“ simple.html”和“ simple.less”都放在Node.js的根文件夹中

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

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

例如：

生成的CSS“ simple.css”具有以下代码：

.style {
  background: violet;
}
.container,
.style {
  font-style: italic;
}
.img,
.style {
  font-size: 30px;
}

输出：

Less中使用的扩展语法列表

扩展用例