在 LESS 中扩展有什么用？

LESS 是最流行的 CSS 预处理器语言之一，因为它具有许多特性，如混合、导入、变量等，有助于降低 CSS 代码的复杂性。 LESS 的一项重要且有用的功能是 @extend 指令。在本文中，我们将了解 LESS 中扩展功能的使用。

LESS 中的扩展帮助我们合并它所使用的不同选择器。我们可以使用:extend关键字来使用 LESS 扩展功能。

句法：

.elem1:extend(.elem1){};

它也可以在类内部使用来扩展类的属性。

&:extend(.elem1);

示例 1：我们在 . btn2块以扩展.btn1类的功能。

.btn1{
    background-color: blue;
    border: 2px solid white;
}
.btn2{
    color: whitesmoke;
    &:extend(.btn1);
}

输出：

CSS

.btn1,
.btn2 {
  background-color: blue;
  border: 2px solid white;
}
.btn2 {
  color: whitesmoke;
}

示例 2：在此示例中， .btn2使用.btn1类进行扩展。

.btn1{
    background-color: blue;
    border: 2px solid white;
}
.btn2:extend(.btn1){};

输出：

CSS

.btn1,
.btn2 {
  background-color: blue;
  border: 2px solid white;
}

我们还可以将多个选择器扩展为一个选择器。这可以使用两种不同的方法来完成。两者的语法是下面给出的方法：

扩展插值选择器： extend关键字不能用于将选择器与变量匹配，但它适用于插值变量。

示例 1：

@variable: .heading2;
@{variable} {
  color: blue;
}
.heading1:extend(.heading2) {}

输出：

CSS

.heading2{
  color: blue;
}

示例 2：

.heading1 {
  color: blue;
}
@{variable}:extend(.heading1) {}
@variable: .heading2;

输出：

CSS

.heading1, .heading2 {
  color: blue;
}

在@media 内部扩展：如果我们从@media 内部调用extend，它将只匹配媒体内部的选择器，其余的将不理会。下面给出了一个显示以下内容的代码示例，其中我们必须在 @media 大括号内扩展一个选择器。下面的例子解释了这一点。

例子：

@media print {
    .head1:extend(.head2) {}
    .head2 {
      color: black;
    }
  }
  .head2 {
    color: red;
  }
  @media screen {
    .head2 {
      color: blue;
    }
  }

输出： Extend 仅扩展那些选择器在同一个@media 内，并忽略其他所有内容。

CSS

@media print {
  .head2,
  .head1 {
    color: black;
  }
}
.head2 {
  color: red;
}
@media screen {
  .head2 {
    color: blue;
  }
}