Mixin 参数有哪些不同类型？

Mixin允许我们创建一个可以根据要求再次重用的 CSS 代码。参数是在定义 mixin 时编写的变量名。这些用逗号分隔。

mixin 参数是 SassScript 值，可作为变量使用，并在包含 mixin 时传递。有两种不同类型的 mixin 参数。

• 关键字参数
• 可变参数

关键字参数：参数用于包含在 mixins 中。这些类型的参数（如果命名）可以按任何顺序传递，并且可以跳过它们的默认值。让我们看一个例子来更好地理解。

SASS 代码：

@mixin design($color, $height:1px) {
    color: red;
    border: $height solid black;
    height: 300px;
}
.temp {
    @include design($color:red, $height:1px);
}

该 SASS 代码将被编译成 CSS 代码，如下所示。

CSS 代码：将以下文件命名为“style.css”。

CSS

.temp {
  color: red;
  border: 1px solid black;
  height: 300px;
}

HTML 代码：让我们在下面的 HTML 文档中链接出这个 CSS 文件 (style.css)。

HTML

  
  


  
Welcome To GFG
  
GeeksforGeeks

输出：

可变参数：当我们需要向 mixin 传递未知数量的参数时，我们使用可变参数。它包含需要传递的所有关键字参数。这些关键字参数可以稍后使用关键字函数($args)访问，该函数以哈希映射的形式返回值。让我们看一个例子来更好地理解。

萨斯代码：

@mixin design($var) {
   color: $var;
}

$values: red, blue, green;
.temp {
   @include design($values...);
}

CSS 代码：

CSS

.temp {
  color: red;
}

HTML 代码：让我们在 HTML 文件中使用这个 CSS 文件 (style.css)。

HTML

  
  


  
Welcome To GFG
  
Online Learning Platform

输出：