如何使用Sass Mixins

Sass is incredible. Whether using it as Sass or SCSS, it improves productivity and makes complex CSS tasks easy. Sass is easy to debug and lets us do more with CSS.

萨斯是不可思议的。 无论将其用作Sass还是SCSS，它都可以提高生产率并简化复杂CSS任务。 Sass易于调试，可以让我们用CSS做更多的事情。

Today's article is about Sass Mixins, it answers the question of What? Why? and How to use a Mixin?

今天的文章是关于Sass Mixins的，它回答了什么问题？ 为什么？ 以及如何使用Mixin？

If you are new to Sass, you check out this Getting Started with Sass.

如果您不熟悉Sass ，请查看此Sass入门 。

什么是Mixin？ ( What is a Mixin? )

A Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site.

Mixin是一个代码块，可让我们对CSS声明进行分组，以便在整个站点中重复使用。

Take for example, displaying an HTML element as a Flex element.

例如，将HTML元素显示为Flex元素。

.row {
    display: -webkit-flex;
    display: flex;
}

There are many elements we want displayed flex, and typing this declaration above over and over gets boring pretty fast. This is where Sass Mixins come in.

我们想要显示flex的元素很多，一遍又一遍地键入此声明会很快变得很无聊。 这是Sass Mixins进入的地方。

创建一个混合 ( Creating a Mixin )

Creating a Mixin is very simple, all we have to do is use @mixin command followed by a space and our Mixin name, then we open and close our curly brackets. Something like this.

创建一个Mixin非常简单，我们要做的就是使用@mixin命令，后跟一个空格和我们的Mixin名称，然后打开和关闭大括号。 这样的事情。

@mixin flex {
    // write the css here
    display: -webkit-flex;
    display: flex;
}

Now we can add our flex declaration and use the Mixin anywhere in our code.

现在，我们可以添加flex声明，并在代码中的任何位置使用Mixin。

使用混音 ( Use a Mixin )

Now that we know how to declare Mixins, we can now learn how to use them in our SCSS code.

现在我们知道了如何声明Mixins，现在我们可以学习如何在我们的SCSS代码中使用它们。

To use a Mixin, we simply use @include followed by the name of the Mixin and a semi-colon.

要使用Mixin，我们只需使用@include后跟Mixin的名称和分号即可。

.row {
    @include flex;
}

After compiling this SCSS code into CSS, our CSS file should look like this.

在将此SCSS代码编译为CSS之后，我们CSS文件应如下所示。

.row {
    display: -webkit-flex;
    display: flex;
}

将参数传递给Mixins ( Passing Arguments to Mixins )

Mixins can also take in arguments to make the output more dynamic. For example, let's assume we are building a grid system, and we can choose the whether to use flexbox for our layout or floats.

Mixins还可以接受参数以使输出更加动态。 例如，假设我们正在构建一个网格系统，并且我们可以选择是否将flexbox用于布局或浮动。

We can create a Mixin, pass an argument to tell it to alternate between flex or floats.

我们可以创建一个Mixin，传递一个参数来告诉它在flex或float之间交替。

To pass arguments to a Mixin, we simply do this.

要将参数传递给Mixin，我们只需执行此操作。

@mixin grid($flex) {
    @if $flex {
        @include flex;
    } @else {
        display: block;
    }
}

Now, when we call the grid Mixin, we must pass a truthy argument to the Mixin. Just as you'd expect, pass an argument to an invoked Mixin like this.

现在，当我们调用grid Mixin时，必须将一个真实参数传递给Mixin。 就像您期望的那样，将参数传递给这样调用的Mixin。

@include grid(true);

To let a Mixin receive multiple arguments, we comma-separate the arguments like this.

为了让Mixin接收多个参数，我们将这样的参数逗号分隔。

@mixin grid($flex, $full-width) {
    // code goes in here
}

默认的混合参数 (Default Mixin Arguments)

Functions in programming languages (SASS included) allow default arguments, it only makes sense for mixins too.

编程语言（包括SASS）中的函数允许使用默认参数，这也只适用于mixin。

The syntax for passing a default argument to a Mixin looks like this.

将默认参数传递给Mixin的语法如下所示。

@mixin grid($flex: true) {
    // code here
}

We can pass as many variables as we want. But, any variable that has a default/optional argument needs to be at the end of the argument list.

我们可以根据需要传递尽可能多的变量。 但是，任何具有默认/可选参数的变量都必须位于参数列表的末尾。

Meaning, you can't do this.

意思是，你不能这样做。

@mixin grid($flex: true, $max-width) {
    // code here
}

SCSS will throw an error that states Required argument $max-width must come before any optional arguments..

SCSS将引发错误，指出Required argument $max-width must come before any optional arguments. 。

Note: Default arguments can be variables, keywords etc.

注意：默认参数可以是变量，关键字等。

可变参数 (Variable Arguments)

In CSS, we have properties like padding and margin that can take anywhere from one to four values for their property arguments.

在CSS中，我们具有诸如padding和margin之类的属性，它们的属性参数可以取一到四个值。

Like this.

像这样。

a {
    padding: 10px;
    padding: 10px 20px;
    padding: 10px 20px 50px;
    padding: 10px 20px 50px 20px;
}

As you know all values above are valid.

如您所知，以上所有值均有效。

In SCSS we also have lists. The padding values above is treated as lists in SCSS. But there is a way for us to tell Mixins to treat these values as variables instead of a list.

在SCSS中，我们还有列表。 上面的填充值在SCSS中被视为列表。 但是我们有一种方法可以告诉Mixins将这些值视为变量而不是列表。

To illustrate, lets create a padding Mixin.

为了说明，让我们创建一个padding Mixin。

@mixin padding($values) {    
    @each $var in $values {
        padding: #{$var};
    }
}

If we use this Mixin @include padding(2px 4px 6px); our result will be.

如果我们使用此Mixin @include padding(2px 4px 6px); 我们的结果将是。

a {
    padding: 2px;
    padding: 4px;
    padding: 6px;
}

To treat this variable as a list, we add triple dots ... after the variable name like this.

为了将此变量视为列表，我们在变量名之后添加三点...

@mixin padding($values...) {    
    @each $var in $values {
        padding: #{$var};
    }
}

Now $values doesn't get treated as a list but rather a normal variable.

现在， $values不会被视为列表，而是一个普通变量。

a {
    @include padding(2px 4px 6px);
}

Now we get this.

现在我们得到了。

a {
    padding: 2px 4px 6px;
}

可变参数（续） (Variable Arguments (Continued))

Another function of the ... is that it is used to spread arguments.

的另一个功能...是它是用来传播参数。

Sounds weird, an example would better illustrate.

听起来很奇怪，下面的例子可以更好地说明这一点。

$style1: 100%, 70px, #fo6d06;
$style2: (background: #bada55, width: 100%, height: 100px);

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

.fogdog {
    @include box($style1...);
}

.badass {
    @include box($style2...);
}

The first thing we did is define two variables $style1 and $style2, a list and map.

我们要做的第一件事是定义两个变量$style1和$style2 ，一个列表和一个映射。

Then we define a box Mixin that takes 3 arguments. Then we call the Mixin twice, both times using the ... (spread operator) to pass a list as the only argument in the first instance, and in the second instance, we passed the map.

然后我们定义一个带有3个参数的Mixin box 。 然后我们两次调用Mixin，两次都使用... （扩展运算符）在第一个实例中将列表作为唯一的参数传递，在第二个实例中，我们传递了地图。

For the list, since we have 3 list items and the Mixin has 3 arguments, each argument is passed in respectively.

对于列表，由于我们有3个列表项，而Mixin有3个参数，因此每个参数分别传入。

If the list has a length less than 3 it throws an error, otherwise it takes only the first 3 list items. Meaning our list can be as 10 items and only the first 3 items will is passed to the list.

如果列表的长度小于3，则将引发错误，否则将仅使用前3个列表项。 这意味着我们的列表可以是10个项目，只有前3个项目将被传递到该列表。

The map is also treated the same way as the list, the only exception is that the map is treated as keyword arguments (meaning the map key values has to match the variable name).

映射与列表的处理方式相同，唯一的例外是，映射被视为关键字参数（这意味着映射键值必须与变量名匹配）。

The above snippet compiles into this.

上面的代码段被编译成这个。

.fogdog {
    width: 100%;
    height: 70px;
    background-color: #fo6d06;
}

.badass {
    width: 100%;
    height: 100px;
    background-color: #bada55;
}

Note: Any variable argument cannot be placed in front of a regular argument. Same as default/optional arguments.

注意：不能将任何变量参数放在常规参数的前面。 与默认/可选参数相同。

@内容 ( @content )

@content allows for Mixin extension. We can pass a block to Mixins with the use of @content.

@content允许Mixin扩展。 我们可以使用@content将一个块传递给@content 。

In short, @content makes this possible.

简而言之， @content使这成为可能。

@include grid() {
    // css go here
}

To make allow Mixins receive a block, we simply do this.

为了允许Mixins接收块，我们只需执行此操作。

@mixin grid() {
    @content;
}

And now, our grid Mixin can take in extra css. An example use case of this is media queries. Take this snippet for example.

现在，我们的网格Mixin可以添加额外CSS。 媒体查询就是一个例子。 以这个片段为例。

@mixin small() {
    @media only screen and (max-width: 320px) {
        @content;
    }
}

Instead of having to type the media query everytime, this feels like a much more stable way to handle media queries.

无需每次都键入媒体查询，这感觉就像是处理媒体查询的更稳定的方法。

@include small {
    // css code for small screens go here
}

This is just one example of @content in action, there are many open source projects that use it, and I'm sure you have quite a few ideas of your own.

这只是@content实际应用的一个示例，有许多使用它的开源项目，而且我敢肯定您有很多自己的想法。

结论 ( Conclusion )

Mixins are obviously very useful and speed up your workflow, and there is a lot we can do with them.

Mixins显然非常有用，可以加快您的工作流程，我们可以使用它们做很多事情。

Here is an example of popular open source Mixins.

这是流行的开源Mixins的示例。

• Andy.scss is a collection of SCSS Mixins.
  Andy.scss是SCSS Mixins的集合。
• SASS-MQ a sass Mixin for handling media queries.
  SASS-MQ Sass Mixin用于处理媒体查询。
• Bourbon a collection of CSS Mixins.
  Bourbon收集了CSS Mixins。
• Family.scss made by Lucas Bonomi or LukyVJ, this makes working with nth-child selectors manageable.
  由Lucas Bonomi或LukyVJ制作的Family.scss ，使使用nth-child选择器的工作变得易于管理。
• Collection of Mixins by TheModernWeb
  混入的收集由TheModernWeb

You can share your favorite Mixins in the comment.

您可以在评论中分享您最喜欢的Mixins。

翻译自: https://scotch.io/tutorials/how-to-use-sass-mixins