mixin sass
For a thorough but concise dive into Sass, SitePoint offers to all its Premium members Jump Start Sass by Sass superstar Hugo Giraudel. Alternatively, you can grab a copy for just $19.
为了全面而简洁地深入Sass，SitePoint为其所有高级会员提供了Sass超级巨星Hugo Giraudel的Jump Start Sass 。 另外，您只需19美元即可获得一份副本。
This article first appeared on SitePoint in 2015 and republished on 14th June 2017 following a number of small corrections and revisions.
该文章于2015年首次出现在SitePoint上，并经过一些小的更正和修订后于2017年6月14日重新发布。
For me finding Sass was a revelation. For the longest time I had tired of writing plain or ‘vanilla’ CSS. For a small site it was fine, but for larger sites the CSS quickly got out of hand. Debugging was a nightmare and I couldn’t help but feel like I could do more with my CSS.
对我来说，发现Sass是一个启示。 在最长的时间里，我厌倦了编写普通或“普通” CSS的工作。 对于小型站点，这很好，但是对于大型站点，CSS很快就失控了。 调试是一场噩梦，我忍不住要用CSS做更多的事情。
I found Sass and everything changed. With Sass I could break my CSS down into modular chunks to make troubleshooting a breeze. I could also use programming concepts, such as functions and variables, when creating my CSS. And most importantly Sass introduced me to Mixins.
我发现萨斯，一切都变了。 使用Sass，我可以将CSS分解为模块化的块，从而使疑难解答变得轻而易举。 创建CSS时，我也可以使用编程概念，例如函数和变量。 最重要的是，Sass向我介绍了Mixins。
A mixin allows you to create reusable chunks of CSS. Being able to do this will help you to avoid writing repetitive code. For example:
mixin允许您创建可重用CSS块。 能够做到这一点将帮助您避免编写重复的代码。 例如：
a:link { color: white; } a:visited { color: blue; } a:hover { color: green; } a:active { color: red; }Writing this code over and over again can get old very quickly, especially if you have a large site with a lot of links. You can create the styles for your links with a Sass mixin like this:
一遍又一遍地编写此代码很快就会变得陈旧，特别是如果您的站点很大且链接很多。 您可以使用Sass mixin为链接创建样式，如下所示：
@mixin linx ($link, $visit, $hover, $active) { a { color: $link; &:visited { color: $visit; } &:hover { color: $hover; } &:active { color: $active; } } }To make use of a mixin you have to include it in your Sass files. To call the linx mixin from above you would add this line:
要使用mixin，您必须将其包括在Sass文件中。 要从上方调用linx mixin，请添加以下行：
@include linx(white, blue, green, red);The @include directive allows you to use mixins within your Sass files.
@include指令允许您在Sass文件中使用mixins。
To create a mixin you use the @mixin directive. For example:
要创建一个mixin，请使用@mixin指令。 例如：
@mixin sample { font-size: 12px; }You define this directive by using @mixin followed by the name of the mixin. You can also optionally include arguments in your mixin, like you did with the linx mixin above.
您可以使用@mixin其后的mixin名称来定义此指令。 您还可以选择将参数包含在您的mixin中，就像您使用上面的linx mixin一样。
You can also use variables in your mixin, which are defined elsewhere in your Sass files. Let’s say you wanted to use $font-base as a variable in your mixin. As long as the variable has been defined you can use it in your mixin:
您还可以在混合中使用变量，这些变量在Sass文件的其他位置定义。 假设您要在混合中使用$font-base作为变量。 只要定义了变量，就可以在mixin中使用它：
$font-base: 12px; @mixin sample { font-size: $font-base; } p { @include sample; }The resulting CSS is:
生成CSS为：
p { font-size: 12px; }A mixin can take Sass data values as arguments. These values are specified when you define the mixin and given a specific value when you @include the mixin. The arguments are then passed to the mixin as variables. Arguments are included in a comma separated list enclosed in parentheses after the mixin name:
mixin可以将Sass数据值用作参数。 这些值在定义混合时指定，并在@include混合时指定特定值。 然后将参数作为变量传递给mixin。 参数包含在mixin名称后的括号中的逗号分隔列表中：
@mixin headline ($color, $size) { color: $color; font-size: $size; } h1 { @include headline(green, 12px); }This will compile to:
这将编译为：
h1 { color: green; font-size: 12px; }When using basic arguments, they have to be called in the order specified in the mixin. In the last example, if you switched the order of arguments when including the mixin, the compiled CSS wouldn’t be valid:
使用基本参数时，必须按mixin中指定的顺序调用它们。 在上一个示例中，如果在包含mixin时切换了参数的顺序，则编译后CSS将无效：
h1 { @include headline(12px, green); } h1 { color: 12px; font-size: green; }As you can see, the mixin just delivers the arguments in the order given, which doesn’t yield the expected CSS code.
如您所见，mixin只是按照给定的顺序传递参数，而不会产生预期CSS代码。
You can also pass Sass variables as arguments. For example, let’s say you want to set a $base-color variable in the above example:
您也可以将Sass变量作为参数传递。 例如，假设您要在上面的示例中设置$base-color变量：
$base-color: pink; @mixin headline($color, $size) { color: $color; font-size: $size; } h1 { @include headline($base-color, 12px);}This will compile to:
这将编译为：
h1 { color: pink; font-size: 12px; }When creating your mixin you can specify default values as arguments. When you include a default value, you can omit passing that value when calling your mixin because Sass will use the default value. For example, if you update the headline mixin from above with a default value like in the code below:
创建混入时，可以指定默认值作为参数。 当包含默认值时，可以在调用mixin时忽略传递该值，因为Sass将使用默认值。 例如，如果您使用诸如下面的代码中的默认值从上方更新标题mixin：
@mixin headline($size, $color: red) { color: $color; font-size: $size; } h1 { @include headline(12px); } h1 { @include headline(12px, blue); }The code compiles as follows:
该代码编译如下：
h1 { color: red; font-size: 12px; } h1 { color: blue; font-size: 12px; }In the first h1 you only specified a pixel size, so the mixin used the default value of red. In the second example, you provided an explicit color value, blue, thereby replacing the default value red in your @include directive. Note that you had to change the order of arguments as Sass wants to specify required arguments first. Since the $color argument has a default value, specifying a color in the @include is optional. You can also specify a variable as a default value:
在第一个h1中，您仅指定了像素大小，因此mixin使用默认值red。 在第二个示例中，您提供了一个明确的颜色值blue，从而替换了@include指令中的默认值red。 请注意，您必须更改参数的顺序，因为Sass希望先指定必需的参数。 由于$color参数具有默认值，因此在@include中指定颜色是可选的。 您还可以将变量指定为默认值：
$base-color: orange; @mixin headline($size, $color: $base-color) { color: $color; font-size: $size; }You also have the option of including your mixin with keyword arguments. Even if using keyword arguments can make your code less concise, it will improve readability, which is important if someone else will be maintaining the code you have written. You can include keyword arguments in any order, and of course default values can be omitted:
您还可以选择将mixin包含在关键字参数中。 即使使用关键字参数可以使您的代码不那么简洁，它也会提高可读性，如果其他人将维护您编写的代码，则这很重要。 您可以以任何顺序包括关键字参数，当然可以省略默认值：
@mixin headline($size, $color: red) { color: $color; font-size: $size; } h1 { @include headline($color: blue, $size: 12px); }This compiles fine even though the arguments are in the wrong order.
即使参数顺序错误，也可以正常编译。
h1 { color: blue; font-size: 12px; }Sometimes you may need your mixin to accept a number of arguments. For example, the padding property can have from one to four arguments. In this situation, you could create a mixin that uses variable arguments. Variable arguments allow you to package up arguments as a list. The variable arguments look like regular arguments for a mixin except they add (…) at the end:
有时您可能需要mixin接受许多参数。 例如， padding属性可以具有一到四个参数。 在这种情况下，您可以创建使用可变参数的混合。 可变参数使您可以将参数打包为列表。 变量自变量看起来像一个mixin的常规自变量，只不过它们在末尾加了(…)：
@mixin pad ($pads...) { padding: $pads; } .one { @include pad(20px); } .two { @include pad(10px 20px); } .three { @include pad(10px 20px 40px); } .four { @include pad(10px 20px 30px 20px); }The code above compiles to:
上面的代码编译为：
.one { padding: 20px; } .two { padding: 10px 20px; } .three { padding: 10px 20px 40px; } .four { padding: 10px 20px 30px 20px; }You can also include regular arguments next to variable arguments. Let’s say you wanted to set a text color in your pad mixin:
您还可以在变量参数旁边添加常规参数。 假设您想在Pad Mixin中设置文本颜色：
@mixin pad ($color,$pads...) { color: $color; padding: $pads; } .four { @include pad(orange, 10px 20px 30px 20px); }Which generates
哪个产生
.four { color: orange; padding: 10px 20px 30px 20px; }The regular arguments have to come before the variable arguments. As you can see, the leftover arguments are packaged up and used for the padding values. When including your mixin, you can also use variable arguments. For your arguments, you can draw from a list of values or a map:
常规参数必须在变量参数之前。 如您所见，剩余的参数已打包并用于填充值。 包括混合时，还可以使用变量参数。 对于参数，可以从值列表或映射中绘制：
$box-style1: 5px, solid, red; $box-style2: (bStyle: dotted, bColor: blue, bWidth: medium); @mixin boxy($bWidth, $bStyle, $bColor) { border-width: $bWidth; border-style: $bStyle; border-color: $bColor; } .first { @include boxy($box-style1...); } .second { @include boxy($box-style2...); }As you can see, you have setup a list and a map to use for your mixin. When using a list, the arguments have to be in the correct order. When using a map, order doesn’t matter because the map values will be treated like keyword arguments. As you can see, the map values are in the wrong order, yet you still end up with correct CSS code:
如您所见，您已经设置了一个列表和一个用于混入的映射。 使用列表时，参数必须以正确的顺序排列。 使用地图时，顺序无关紧要，因为地图值将被视为关键字参数。 如您所见，映射值的顺序错误，但最终仍然得到正确CSS代码：
.first { border-width: 5px; border-style: solid; border-color: red; } .second { border-width: medium; border-style: dotted; border-color: blue; }Through the @content directive you are also able to pass a block of styles not defined in the mixin. These additional styles will appear within the mixin where you place @content:
通过@content指令，您还可以传递未在mixin中定义的样式块。 这些其他样式将出现在您放置@content的mixin中：
@mixin cont { background-color: black; color: white; @content; }Now, when you call this mixin, you will be able to add any additional properties you’d like to use:
现在，当您调用此mixin时，您将能够添加要使用的任何其他属性：
div { @include cont { font-size: 12px; font-style: italic; } } div { background-color: black; color: white; font-size: 12px; font-style: italic; }As you can see, the font-size and the font-style added above have been incorporated into the compiled CSS code relating to the div element. The @content directive allows you to setup base styles and customize as needed.
如您所见，上面添加的font-size和font-style已合并到与div元素有关的已编译CSS代码中。 @content指令允许您设置基本样式并根据需要进行自定义。
As you can see, mixins can be very useful in your Sass. There is so much you can accomplish with mixins to speed up your workflow. For more info on Sass mixins check out Sass: Mixin or Placeholder? by Hugo Giraoudel and the Sass docs.
如您所见，mixins在您的Sass中非常有用。 使用mixin可以完成很多工作，以加快工作流程。 有关Sass mixins的更多信息，请查看Sass：Mixin或占位符？ 由Hugo Giraoudel和Sass文档撰写。
What are your favourite Sass mixins? Please share them in the comments.
您最喜欢的Sass mixins是什么？ 请在评论中分享。
翻译自: https://www.sitepoint.com/sass-basics-the-mixin-directive/
mixin sass
相关资源：详解vue项目中如何引入全局sass/less变量、function、mixin