📜  LESS 中的 Mixins 有什么用?

📅  最后修改于: 2022-05-13 01:56:41.018000             🧑  作者: Mango

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;
}


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;
}


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


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


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


这是 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