我们前端开发人员通常在编码时对大多数HTML CSS编码进行编码。编码时，我们没有一遍又一遍地编写重复的结构，而是将它们作为组件结构做好准备，并将其包括在编码中，即我们进行包含过程。编码CSS时，我们通常使用SASS或SCSS工具。在这些工具中，有一个混合结构，我们可以创建重复的结构。
什么是SCSS Mixin？
当CSS编码时，我们重复大量编码，例如，我们使用以下代码将对象组合在中间的盒子中。
.box {
display: flex;
justify-content: center;
align-items: center;
}
创建一个名为BoxCenter的混合蛋白，并在我们需要创建这些代码时将其包括在内，将使我们的工作比多次重写这些代码更容易。此外，它将最小化我们编写相同代码的时间。
混合结构和创造
在SCSS中创建和使用Mixin实际上非常简单。如果用编程语言创建函数，则可以在SCSS中的类似结构中创建Mixin结构。
@mixin isim(parameter or parameters){
// Css Code
}
您可以使用或没有参数创建混合。这完全取决于您。我将解释这两种用途。
创建和使用无参数的混合
我们创建一个称为BoxCenter的混合物。然后，我们在.box中包括我们创建的“ @inculude boxcenter（）”的混合物。这就是如此简单。
@mixin BoxCenter() {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
color: red;
@include BoxCenter();
}
输出
让我们看一下CSS输出。在阅读本文时，我认为您知道如何编译SCSS并获取CSS输出。
.box {
width: 100px;
height: 100px;
color: red;
display: flex;
justify-content: center;
align-items: center;
}
创建和使用参数化混合蛋白
通常，更喜欢用参数创建混合物。
@mixin BoxCenter($d, $jc, $ai) {
display: $d;
justify-content: $jc;
align-items: $ai;
}
.box {
width: 100px;
height: 100px;
color: red;
@include BoxCenter(flex, start, end);
}
输出
上述代码的输出将如下。
.box {
width: 100px;
height: 100px;
color: red;
display: flex;
justify-content: start;
align-items: end;
}
是的，在此博客文章中，您已经学会了如何在SCS中使用或没有参数创建和使用Mixins。我同意您在使用SCSS时一定会创建自己的混合物。 ð再见在我的下一篇博客文章中与您见面。