首先，让我们快速了解一下什么是mixin：
简而言之，mixin是一个代码块，它允许您在其中编写样式并在整个项目中使用它。您也可以将其视为可重用的组件。它还可以帮助您编写更简洁的代码，而不必重复自己。
这就是你在Sass中编写mixin的方式：
@mixinname{properties;}以下是如何将其包含在您的代码中：
div{@includename;}这是在代码中使用mixin的示例：
@mixincircle{width:200px;height:200px;background:red;border-radius:50%;}div{@includecircle;}现在让我们看看上面的代码发生了什么：
现在让我们看一个实际中的mixin示例。
以下是使用mixin创建粉红色圆圈的方法：
Mixin是可重复使用的，记得吗？当我们知道我们会经常重复自己时，我们会使用它们。所以重点是避免重复并保持代码干净。
现在我们已经了解了如何编写mixin，让我们继续下一节。我想将此部分分成更小的部分：
参数是由逗号分隔的变量的名称。
我将从一个示例开始本节：
如果你要创建两个不同的圈子怎么办？像绿色圆圈和粉红色圆圈？
您可以创建两个单独的mixin，一个用于绿色，一个用于粉红色：
//amixinforthegreencircle@mixingreen-circle{width:200px;height:200px;border-radius:50%;background:green;}//andanothermixinforthepinkcircle@mixinpink-circle{width:200px;height:200px;border-radius:50%;background:pink;}但这不是很好，因为您正在重复您的代码。我们应该坚持DRY（不要重复自己）原则，记得吗？
这就是mixin参数的用武之地。
在一个常规的mixin中（我所说的常规是指没有传递参数时的mixin），你定义了一些特定的样式。但是参数允许您通过将它们转换为变量来定义不同的样式。这就像为每个元素定制每种样式。让我们继续下一节，看看一些例子。
我们已经了解了参数是什么以及何时使用它。现在是时候看看如何传递参数了：
@mixinname($argument,$argument){property:$argument;property:$argument;}通过传递参数，您可以自定义它们
这是一个例子：
@mixincircle2($width,$height,$color){width:$width;height:$height;background:$color;}您可以将参数视为可自定义的变量，您可以在不同的情况下使用这些变量来创建不同的东西，而无需重复自己。
就像你传递$width给width属性一样，你可以在不同的情况下定义它。也许您需要在一个地方宽度为50像素，在其他地方为500像素。
那有意义吗？让我用另一个例子为你分解。
好的，回到我们的圈子。
我想用一个mixin制作一个大的红色圆圈和一个小的绿色圆圈（两个不同的东西）。
width,heightandbackground-color,right由于我们正在构建圆圈，因此两种情况下的边界半径都是50%。所以我会不管它，不会向它传递任何论据。
现在我们只剩下3个属性：
这意味着我们只需要3个参数：
@mixincircle($width,$height,$color){//Wepassed$widthtothewidthpropertywidth:$width;//Wepassed$heighttotheheightpropertyheight:$height;//Andwepassed$colortowidthbackground-colorbackground:$color;//noargumentforthisproperty,beacuaseit'sgonnabethe//sameinbothcirclesborder-radius:50%;}这就是我们的mixin的样子
所以现在让我们看看如何将参数传递给我们的mixin：
.circle-red{//circle($width,$height,$color);@includecircle(350px,350px,red);}对于小绿圈.circle-green{//circle($width,$height,$color);@includecircle(200px,200px,green);}结果如下：
但是如果我要制作一个正方形和一个圆形，那么我也需要将一个参数传递给border-radius：
@mixincircle($width,$height,$color,$radius){width:$width;height:$height;background:$color;//passedargumenttoborder-radiustohavecontroloveritborder-radius:$radius;}.square{//($width,$height,$color,$radius)@includecircle(350px,350px,red,10px);}.circle{//($width,$height,$color,$radius)@includecircle(200px,200px,green,50%);}现在我们有一个大的红色方块和一个小的绿色圆圈：
这就是我想做的，黑色背景的绿色文本和透明背景的红色文本：
@mixintext($font-size,$color,$bg-color){//wepassthe$font-sizetofont-sizepropertyfont-size:$font-size;//wepassthe$colortocolorpropertycolor:$color;//wepassthe$bg-colortobackgroundpropertybackground:$bg-color;}.text1{//($font-size,$color,$bg-color)@includetext(3rem,green,black)}.text2{//($font-size,$color,$bg-color)@includetext(5em,red,transparent)}你有它。
快速提示：请记住，参数的顺序很重要。
这很重要，因为知道要为每个参数传递什么值的唯一方法是使用正确的顺序。
@mixincircle($width,$height,$color){width:$width;height:$height;background:$color;border-radius:50%;}.circle-red{//($width,$height,$color)@includecircle(350px,350px,red);}正确的顺序
您不能先传递颜色，然后再传递宽度和高度：
.circle-red{@includecircle(red,350px,350px);}错误的顺序
关于这个错误的顺序，我们传递$width给width属性，因此第一个值需要是一个数字。因此，如果您$color先通过，则将无法识别该值。这就是为什么我们必须按顺序传递参数。
@mixinname{properties;}@mixinname($argument,$argument){property:$argument;property:$argument;}