LESS 中的 Mixins 有什么用？

在本文中，我们将了解 LESS 中的 Mixins 是什么，并通过示例了解它们的实现和用法。 CSS 预处理器是一个程序，它使用定义的预处理器规则集生成 CSS 代码，并有助于降低 CSS 代码的整体复杂性。 LESS 是一个 CSS 预处理器，它是一种 CSS 向后兼容的语言扩展。 LESS 中的 Mixins 是一种将一堆 CSS 属性从一个规则集包含到另一个规则集的方法，即在同一个文件中多次包含这些属性。

例如，考虑我们在网页中有多个按钮（假设具有不同的按钮 id/类），每个按钮包含不同的颜色并具有相似的字体大小和填充属性。现在，如果我们需要为这些按钮编写类似的 CSS 属性，那么我们必须为每个按钮重复多次代码块，因此代码变得冗长。 LESS 中的 Mixin 有助于减少和丢弃代码中使用的重复属性。使用 LESS，我们可以在一个名为“button_basic”的 mixin 中定义所有重复属性，并在其中定义所有重复属性。

句法：

// Mixin in LESS

.button_basic{
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
}

例子：在这个例子中，我们使用了上面的 mixin，只是在其他元素块中像函数一样调用它。

/*LESS file */

.button_basic{
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
}
.btn1{
    .button_basic();
    background-color: rgb(235, 141, 141);
}
.btn2{
    .button_basic();
    background-color: rgb(94, 94, 230);
}
.btn3{
    .button_basic();
    background-color: violet;
}

从上面的代码示例中，我们调用了在“btn1”、“btn2”和“btn3”类中声明的“ .border-basic ”混合。编译上述代码后，会生成如下原生 CSS 代码。

CSS

.button_basic {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
}
.btn1 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #eb8d8d;
}
.btn2 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #5e5ee6;
}
.btn3 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: violet;
}

这是 Less 中 mixins 的基本用法。现在，让我们了解一些可以适用于 mixin 的其他概念。

参数 Mixins：我们可以通过在 mixins 顶部定义参数来在 mixins 中传递参数。

句法：

.button_basic(@background_color){
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
    background-color: @background_color;
}

示例：在这里，我们可以像其他 mixin 一样调用上面的 mixin，并且在调用时我们将值传递给 mixins 参数。

/*Less Code file*/

.button_basic(@background_color){
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
    background-color: @background_color;
}
.btn1{
    .button_basic(rgb(235, 141, 141));
   
}
.btn2{
    .button_basic(rgb(94, 94, 230));
 
}
.btn3{
    .button_basic( violet);
   
}

当上面的 LESS 代码被编译时，它会产生以下 CSS 代码：

CSS

.btn1 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #eb8d8d;
}
.btn2 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: #5e5ee6;
}
.btn3 {
  font-size: 1em;
  padding: 1em;
  font-family: "Times New Roman", Times, serif;
  background-color: violet;
}

我们还可以为参数 mixins 赋予默认值，如下所示：

.button_basic(@background_color:red){
   font-size: 1em;
   padding: 1em;
   font-family: 'Times New Roman', Times, serif;
   background-color: @background_color;
}
.button1{
   .button_basic();
}

当上面的代码编译成 CSS 时，会产生以下代码：

CSS

.button1 {
  font-size: 1em;
  padding: 1em;
  font-family: 'Times New Roman', Times, serif;
  background-color: red;
}

在调用上述 mixin 时，如果我们在调用时不传递任何值，则在这些情况下将使用参数的默认值。

Mixins 中的选择器：我们也可以在 mixins 中使用选择器。下面是一个示例：

句法：

.button_basic(){
   &:hover{
      background-color: white;
  }
}

示例：在上面的示例中，悬停选择器在 mixins 内部使用，并且可以从其他元素中调用。

/*LESS Code file */

.button_basic()
{
  &:hover
  {
      background-color: white;
  }
}
.btn1
{
    .button_basic();
}

当上面的代码编译成 CSS 时，会产生如下代码：

CSS

.btn1:hover {
  background-color: white;
}

!important 关键字：我们可以在 mixin 旁边使用 !important 关键字来使整个 mixin 变得“重要”。

示例：这是一个示例，我们使 mixin 在从另一个元素调用时变得重要。

/* Less Code */
.button_basic(){
    font-size: 1em;
    padding: 1em;
    font-family: 'Times New Roman', Times, serif;
  }

.btn2{
    .button_basic() !important;

}

当上面的代码编译成 CSS 时，会产生以下代码：

CSS

/*CSS code */
  
.btn2 
{
  font-size: 1em !important;
  padding: 1em !important;
  font-family: 'Times New Roman', Times, serif !important;
}

因此，我们已经讨论了 Mixins 的使用以及 LESS 中 mixins 的许多特性。 LESS 中的 mixin 功能是编写长 CSS 代码时非常有用的功能之一，其中许多项目要重复。它不仅节省了代码行，而且降低了代码的复杂性。

参考： https ://lesscss.org/features/#mixins-feature