Sass 中使用 Mixin 和传递参数

Sass 中的 Mixin 是什么？

首先，让我们快速了解一下什么是mixin：

“ Mixins允许您定义可以在整个样式表中重复使用的样式。它们可以轻松避免使用非语义类，例如.float-left，并在库中分发样式集合。” – 萨斯文档
简而言之，mixin 是一个代码块，它允许您在其中编写样式并在整个项目中使用它。您也可以将其视为_可重用_的组件。它还可以帮助您编写更简洁的代码，而不必重复自己。

如何编写一个 Mixin

这就是你在 Sass 中编写 mixin 的方式：

@mixin name {
    properties;
}

以下是如何将其包含在您的代码中：

div {
    @include name;
}

这是在代码中使用 mixin 的示例：

@mixin circle {
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 50%;
}

div {
   @include circle;
}

现在让我们看看上面的代码发生了什么：

@mixin首先，我们使用at 规则定义一个 mixin 。
然后我们给它一个名字——选择你认为适合你的用途的任何东西。
添加您的 CSS 属性。
通过简单地使用@include你将它传递给 mixin 块。

Mixin Example

现在让我们看一个实际中的 mixin 示例。

以下是使用 mixin 创建粉红色圆圈的方法：

@mixin circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #ea0185 ;
}

.circle {
    @include circle;
}

pink-circle 现在你可能会问 “我为什么要使用 mixin 来创建一个粉红色的圆圈？我可以给我的元素一个类并设置它的样式。”

Mixin 是可重复使用的，记得吗？当我们知道我们会经常重复自己时，我们会使用它们。所以重点是_避免_重复并保持代码干净。

传递参数

现在我们已经了解了如何编写 mixin，让我们继续下一节。我想将此部分分成更小的部分：

What are mixin arguments?
何时传递参数？
如何传递论点？+ 例子。

What Are Mixin Arguments?

参数是由逗号分隔的变量的名称。

什么时候应该将参数传递给 Mixin？

我将从一个示例开始本节：

如果你要创建两个不同的圈子怎么办？像绿色圆圈和粉红色圆圈？

您可以创建两个单独的 mixin，一个用于绿色，一个用于粉红色：

// a mixin for the green circle
@mixin green-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: green;
}
// and another mixin for the pink circle
@mixin pink-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: pink;
}

但这不是很好，因为您正在重复您的代码。我们应该坚持 DRY（不要重复自己）原则，记得吗？

这就是 mixin 参数的用武之地。

在一个常规的 mixin 中（我所说的常规是指没有传递参数时的 mixin），你定义了一些特定的样式。但是参数允许您通过将它们转换为变量来定义不同的样式。这就像为每个元素定制每种样式。让我们继续下一节，看看一些例子。

如何将参数传递给 Mixin

我们已经了解了参数是什么以及何时使用它。现在是时候看看如何传递参数了：

@mixin name($argument,$argument) {
    property: $argument;
    property: $argument;
}

通过传递参数，您可以自定义它们

这是一个例子：

@mixin circle2 ($width,$height,$color) {
    width: $width;
    height: $height;
    background: $color;
}

您可以将参数视为可自定义的变量，您可以在不同的情况下使用这些变量来创建不同的东西，而无需重复自己。

就像你传递$width给 width 属性一样，你可以在不同的情况下定义它。也许您需要在一个地方宽度为 50 像素，在其他地方为 500 像素。

那有意义吗？让我用另一个例子为你分解。

好的，回到我们的圈子。

我想用一个 mixin 制作一个大的红色圆圈和一个小的绿色圆圈（两个不同的东西）。

绿色和红色圆.png 现在我需要什么属性来做一个圆圈？

width, height and background-color, right?

由于我们正在构建圆圈，因此两种情况下的边界半径都是 50%。所以我会不管它，不会向它传递任何论据。

现在我们只剩下 3 个属性：

宽度
高度
背景颜色

这意味着我们只需要 3 个参数：

@mixin circle($width,$height,$color) {
    // We passed $width to the width property
    width: $width;
    
    // We passed $height to the height property
    height: $height;
    
    // And we passed $color to width background-color
    background: $color;
    
    // no argument for this property, beacuase it's gonna be the
    // same in both circles
    border-radius: 50%;
}

这就是我们的 mixin 的样子

所以现在让我们看看如何将参数传递给我们的 mixin：

对于大红圈

.circle-red {
    // circle ($width,$height,$color);
   @include circle (350px,350px,red);
}

对于小绿圈

.circle-green {
    // circle ($width,$height,$color);
    @include circle (200px,200px,green);
}

结果如下：

绿色和红色圆圈正如我之前所说，我没有将任何参数传递给border-radius 属性，因为它总是50%（在_这种_情况下）。

但是如果我要制作一个正方形和一个圆形，那么我也需要将一个参数传递给border-radius：

@mixin circle($width,$height,$color,$radius) {
    width: $width;
    height: $height;
    background: $color;
    // passed argument to border-radius to have control over it 
    border-radius: $radius;
}
.square {
     // ($width,$height,$color,$radius)
    @include circle (350px,350px,red, 10px);
}
.circle {
    // ($width,$height,$color,$radius)
    @include circle (200px,200px,green, 50%);
}

现在我们有一个大的红色方块和一个小的绿色圆圈：

绿色圆和红色方块.png 让我们看另一个例子。这次让我们尝试在某些文本上使用 mixin。

这就是我想做的，黑色背景的绿色文本和透明背景的红色文本：

黑色背景的绿色文本和透明背景的红色文本.png 首先，我创建了两个 h2 元素：

<h2 class="text1">Text</h2>
<h2 class="text2">Text</h2>

我们需要font-size, color, and background这里的属性。现在我应该通过将参数转换为变量来传递参数。

@mixin text($font-size,$color,$bg-color) {
     // we pass the $font-size to font-size property
    font-size: $font-size;
    // we pass the $color to color property
    color: $color;
    // we pass the $bg-color to background property
    background: $bg-color;
}
.text1 {
    // ($font-size,$color,$bg-color)
    @include text(3rem,green , black)
}

.text2 {
    // ($font-size,$color,$bg-color)
    @include text(5em,red , transparent)
}

你有它。

快速提示： 请记住，_参数的顺序很重要。_

这很重要，因为知道要为每个参数传递什么值的唯一方法是使用正确的顺序。

例如，如果你的参数顺序是 _width,width, width,height, $color_，传递它们也应该是有序的：

@mixin circle($width,$height,$color) {
    width: $width;
    height: $height;
    background: $color;
    border-radius: 50%;
}

.circle-red {
   // ($width,$height,$color)
   @include circle (350px,350px,red);
}

正确的顺序

您不能先传递颜色，然后再传递宽度和高度：

.circle-red {
    @include circle (red,350px,350px);
}

错误的顺序

关于这个错误的顺序，我们传递$width给 width 属性，因此第一个值需要是一个数字。因此，如果您$color先通过，则将无法识别该值。这就是为什么我们必须按顺序传递参数。

这是我们在本文中讨论的内容的快速回顾

Mixin 是可重用的代码块。
当我们知道我们将大量重复代码时，我们会使用它们。
这就是我们如何编写一个mixin：

@mixin name {
    properties;
}

参数是由逗号分隔的变量的名称。
参数允许您定义不同的样式。
论点的顺序很重要。
这就是我们传递参数的方式：

@mixin name($argument,$argument) {
    property: $argument;
    property: $argument;

}

这就是本文的总结——我希望你喜欢它并发现它很有用.