什么是 Mixin 以及如何在 SASS 中使用它？

在本文中，我们将解释并查看 Mixin 的用法。 Mixin 用于 Sass，它是一个 CSS 预处理器。 Mixin 在 Sass 中作为一个函数工作，帮助我们减少一遍又一遍地编写相同的代码。

句法

@mixin (){
    // Code...
}

name：我们必须提供我们的 mixin 的名称，以便我们以后可以在其他类中使用它。

参数：这里的参数是可选的，但是如果我们必须使用，我们会有一个带有$符号的变量Ex； $价值。

现在让我们了解如何在项目中使用 mixin。所以首先我们要明白 mixin 是 SASS 的专有组件，我们会在一个单独的文件中使用它，然后将它包含在我们的 HTML 页面中。因此，在下面给出的示例中，我们将使用已编译的 Sass。

让我们考虑一个场景，我们有多个 div，我们必须更改一些属性，如边框半径、背景颜色等。然后我们必须为每个类一遍又一遍地编写相同的代码。在这里，我们可以使用 mixin，并在需要更改 CSS 属性的每个类中使用 mixin。在使用 mixin 时我们还需要注意一件事，当我们必须使用 mixin 时，我们必须使用关键字@include然后是 mixin 的名称并传递所需的参数。

萨斯代码

// Use of mixin
@mixin bg-color($color) {
   background-color: $color;
}

.div1 {
   width: 100px;
   height: 100px;
   @include bg-color(red); // mixin call
}
.div2 {
   width: 100px;
   height: 100px;
   @include bg-color(green); // mixin call
}

编译上述 Sass 代码的 CSS 代码

.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: green;
}

上面写的 SASS 代码是创建混音的实际方法。现在在示例中，我们将使用将出现在普通 CSS 中的编译后的 SASS 代码。

示例 1：在此示例中，我们将使用编译后的 CSS 文件。

HTML

  

    


  

    
GeeksforGeeks
    

        
GeeksforGeeks
    
    

        
GeeksforGeeks
    

  

输出：

我们可以以另一种方式使用 mixin，我们首先将值赋予属性，然后在其他类中使用它。请注意，我们可以拥有任意数量的 mixin。

萨斯代码

// use of mixin
@mixin bg-color($color) {
  background-color: $color;
}

@mixin border-radius($radius) {
    border-radius: 10px;
  }

.div1{
    width: 100px;
    height: 100px;
    @include bg-color(red); // mixin call
    @include border-radius(10px); // mixin call
}
.div2{
    width: 100px;
    height: 100px;
    @include bg-color(green); // mixin call
    @include border-radius(10px); // mixin call
}

编译上述 Sass 代码的 CSS 代码

.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 10px;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 10px;
}

例2：在这个例子中，我们最初在创建mixin的时候给了border-radius 10px的值，然后我们在div类中使用了它。

HTML

  

    

  

    

        GeeksforGeeks
    
      
    

        
GeeksforGeeks
    
      
    

        
GeeksforGeeks
    

  

输出：

因此，这是我们如何在项目中使用 mixin 以使大型项目的任务更容易的基本概述，我们还可以在 mixin 中一次使用多个属性，然后再使用它。