Sass：Mixin或占位符？

When I started playing with Sass about a year and a half ago, one thing that took me some time to understand was the difference between including a mixin and extending a placeholder. Actually even the notion of placeholder was kind of black magic voodoo for me back then.

大约一年半以前，当我开始与Sass一起玩时，需要花费一些时间来理解的一件事是，添加mixin和扩展占位符之间的区别。 实际上，那时对我来说，甚至占位符的概念也是一种黑魔法伏都教。

If you are in a similar situation, don’t worry, because I will try to enlighten the path. Today we’ll learn what exactly a mixin is for, and when to use a Sass placeholder. You’ll understand they both serve different purposes and shouldn’t be confused.

如果您处于类似情况，请不要担心，因为我会尽力启发您的路途。 今天，我们将学习mixin的确切用途以及何时使用Sass占位符。 您将了解它们都具有不同的用途，不应混淆。

Note: While I am going to talk about Sass, this article could well apply to any other CSS preprocessor, whether it be Stylus, LESS, or whatever you happen to use. The technologies are generally doing the same thing, so feel free to adapt the content of this article to the tool of your choice.

注意：当我要谈论Sass时，本文很可能适用于任何其他CSS预处理器，无论是Stylus，LESS还是您碰巧使用的任何东西。 这些技术通常都在做同样的事情，因此，可以根据您选择的工具随意调整本文的内容。

First we should probably do some catch up on what we are talking about when we refer to Sass placeholders and mixins, so let’s do that now.

首先，当我们提到Sass占位符和mixins时 ，我们可能应该赶上我们正在谈论的内容，所以现在就开始做吧。

混起来 (Mixin it Up)

A mixin is a directive that allows you to define multiple rules depending on several arguments. Think of it as a function that would dump CSS content instead of returning a value. Here is the definition from the Sass Reference:

mixin是一种伪指令，可让您根据多个参数定义多个规则。 将其视为可以转储CSS内容而不返回值的函数。 这是Sass参考中的定义：

Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even take arguments which allows you to produce a wide variety of styles with very few mixins.

使用混合插件，您可以定义可以在整个样式表中重复使用的样式，而无需使用非语义类，例如.float-left。 Mixins还可以包含完整CSS规则，以及Sass文档中其他位置允许的任何其他内容。 他们甚至可以接受参数，从而使您可以使用很少的mixin生成多种样式。

Now that we’ve covered terminology, let’s say you spot a couple of declarations that are repeated multiple times across your stylesheet. You know that code repetition is bad and you are familiar with the DRY (Don’t Repeat Yourself) concept. To correct this, you can write a mixin for those repeated declarations:

现在，我们已经涵盖了术语，比方说，您发现了几个在样式表中重复多次的声明。 您知道代码重复是不好的，并且您熟悉DRY( 请勿重复自己 )概念。 为了解决这个问题，您可以为这些重复的声明编写一个mixin：

@mixin center() { display: block; margin-left: auto; margin-right: auto; } .container { @include center(); /* Other styles here... */ } /* Other styles... */ .image-cover { @include center; }

Note: If you don’t pass an argument to a mixin, you can omit the parentheses. In fact, you can even omit them in the @mixin definition.

注意：如果不将参数传递给mixin，则可以省略括号。 实际上，您甚至可以在@mixin定义中忽略它们。

With this newly created mixin way you don’t have to repeat those three lines every time you need to center an element; you simply include the mixin. Pretty convenient, isn’t it!

使用这种新创建的mixin方法，您不必每次需要将元素居中时都重复这三行； 您只需包含mixin。 很方便，不是吗！

Sometimes you want a mixin to build what you would call a “shorthand” for a couple of properties. For example, width and height. Aren’t you tired of writing both lines over and over again? Especially when both have the same value? Well let’s deal with that using a mixin!

有时，您希望mixin为几个属性构建所谓的“简写”。 例如， width和height 。 您是否不厌倦一遍又一遍地写这两行？ 尤其是当两者具有相同的值时？ 好吧，让我们使用mixin来处理它！

@mixin size($width, $height: $width) { width: $width; height: $height; }

Quite simple, isn’t it? Note how we made the $height parameter optional by defaulting it to have the same value as the $width directly in the mixin signature. Now whenever you need to define dimensions for an element, you can just do this:

很简单，不是吗？ 注意我们如何通过默认将$height参数设置为与mixin签名中的$width相同的值来使其成为可选参数。 现在，每当需要为元素定义尺寸时，都可以执行以下操作：

.icon { @include size(32px); } .cover { @include size(100%, 10em); }

Note: another good example of a syntactic-sugar mixin would be this one I made to avoid writing top, right, bottom, left and position every time I want to use a different position system than static.

注：一个语法糖混入的另一个很好的例子是这样一个我，以避免书写top ， right ， bottom ， left和position我想用一个不同的位置的系统不是每次static 。

了解您的占位符 (Know Your Placeholder)

Placeholders are kind of a weird thing. They are classes that aren’t output when your SCSS is compiled. So then you might think “What’s the point?”. Actually the point would be minimal if it wasn’t for the @extend directive. But first things first. This is how you write a placeholder:

占位符有点奇怪。 它们是在编译SCSS时不会输出的类。 因此，您可能会想“这有什么意义？” 。 实际上，如果不是@extend指令，那么这一点将是最小的。 但是首先是第一件事。 这是您编写占位符的方式：

%center { display: block; margin-left: auto; margin-right: auto; }

Editors Note: Like a placholder, a mixin is likewise useless unless its referenced, so this section is not necessarily saying they are different in that respect, but this is only clarifying that even though it looks similar to a CSS declaration block, it won’t get compiled on its own.

编者注：像placholder一样，除非引用了mixin，否则mixin同样没有用，因此本节不一定表示它们在这方面有所不同，但这只是在澄清，即使它看起来类似于CSS声明块，也不会。不能自己编译。

Basically you write it exactly like a class except you prefix it with the % symbol instead of a dot. Also, it follows the same naming rules as classes.

基本上，您编写它的方式与类完全相同，只不过它以%符号而不是点作为前缀。 而且，它遵循与类相同的命名规则 。

Now if you try to compile your SCSS, you won’t see this sample of code in the generated file. As I’ve said: placeholders are not compiled to the source.

现在，如果您尝试编译SCSS，则在生成的文件中将不会看到此代码示例。 就像我说过的： 占位符未编译为source 。

So for now, this placeholder is absolutely useless. You can’t make any use of it unless you look at the @extend side. The @extend directive aims to inherit properties from a CSS selector / SCSS placeholder. Here is how you use it:

因此，就目前而言，此占位符绝对没有用。 除非查看@extend ，否则不能使用它。 @extend指令旨在从CSS选择器/ SCSS占位符继承属性。 使用方法如下：

.container { @extend %center; }

By doing this, Sass will get the content of the %center placeholder and apply it to .container (even if that’s actually not quite how it’s done — but that doesn’t matter right now). As I said, you can also extend existing CSS selectors (in addition to SCSS placeholders) like this:

这样，Sass将获取%center占位符的内容并将其应用于.container (即使实际上并不完全是它的完成方式，但是现在不重要)。 就像我说的，您还可以像这样扩展现有CSS选择器(除了SCSS占位符)：

.table-zebra { @extend .table; tr:nth-of-type(even) { background: rgba(0,0,0,.5); } }

This is a very common use case for the @extend directive. In this case, we ask for the .table-zebra class to behave exactly like the .table class and then we add the zebra-specific rules. Extending selectors is very convenient when you develop your site/application in modular components.

这是@extend指令的非常常见的用例。 在这种情况下，我们要求.table-zebra类的行为与.table类完全相同，然后添加特定于zebra的规则。 在模块化组件中开发站点/应用程序时，扩展选择器非常方便。

使用哪个？ (Which One to Use?)

So the question remains: which one should you use? Well, as for everything in our field: it depends. It depends on the context and what you are ultimately trying to do.

所以问题仍然存在： 您应该使用哪一个？ 好吧，至于我们领域中的一切， 这取决于 。 这取决于上下文以及最终要做什么。

The best advice would be: if you need variables, use a mixin. Otherwise, extend a placeholder. There are two reasons for this:

最好的建议是：如果需要变量，请使用mixin。 否则，请扩展一个占位符。 有两个原因：

First, you can’t use variables in a placeholder. Actually you can but you cannot pass variables to your placeholders so you can’t generate context-specific CSS like you would do with a mixin.

首先，您不能在占位符中使用变量。 实际上，您可以但不能将变量传递给占位符，因此您无法像使用mixin那样生成特定于上下文CSS。

Second, the way Sass handles mixins makes them very inconvenient when you don’t use them with contextual variables. To put it simply: Sass will duplicate the output of the mixin every time you use it, resulting not only in duplicated CSS but also a bigger stylesheet.

其次，当您不将它们与上下文变量一起使用时，Sass处理mixins的方式使它们非常不便。 简单地说：Sass每次使用时都会复制mixin的输出，不仅会导致CSS重复，还会导致样式表变大。

Consider the very first example in this article:

请考虑本文中的第一个示例：

@mixin center { display: block; margin-left: auto; margin-right: auto; } .container { @include center; } .image-cover { @include center; }

This will result in the following CSS output:

这将导致以下CSS输出：

.container { display: block; margin-left: auto; margin-right: auto; } .image-cover { display: block; margin-left: auto; margin-right: auto; }

Notice the duplicate CSS? It won’t do much harm if it’s only three lines duplicated, but if you have mixins dumping dozens of CSS lines and used multiple times across a project, those three lines could easily become 300. What if we revamp our example to instead use a placeholder?

注意重复CSS吗？ 如果只复制三行，不会有太大危害，但是如果您有mixins转储数十行CSS行并在项目中多次使用，那么这三行很容易变成300行。如果我们修改示例以改为使用占位符？

%center { display: block; margin-left: auto; margin-right: auto; } .container { @extend %center; } .image-cover { @extend %center; }

Now this is the generated CSS:

现在这是生成CSS：

.container, .image-cover { display: block; margin-left: auto; margin-right: auto; }

Much better! The compilation takes advantage of selector grouping without any repeated styles. So whenever you want to avoid writing the same properties over and over, knowing that they won’t ever change, it is a good idea to extend a placeholder. This will result in a much leaner compiled stylesheet.

好多了！ 编译利用选择器分组的优势，而无需任何重复的样式。 因此，每当您要避免一遍又一遍地写相同的属性，而又知道它们永远不会改变时，最好扩展一个占位符。 这将导致精简的编译样式表。

On the other hand if you are willing to write the same properties at various places but with different values (sizes, colors, etc.) a mixin is the best way to go. If you have a group of both fixed values and variables values, you should try a combination of both.

另一方面，如果您愿意在不同的地方编写相同的属性，但使用不同的值(大小，颜色等)，则最好使用mixin。 如果同时具有一组固定值和变量值，则应尝试将两者结合使用。

%center { margin-left: auto; margin-right: auto; display: block; } @mixin skin($color, $size) { @extend %center; background: $color; height: $size; } a { @include skin(pink, 10em) } b { @include skin(blue, 90px) }

In this case, the mixin is extending the placeholder for fixed values instead of dumping them directly in its body. This generates clean CSS:

在这种情况下，mixin会将占位符扩展为固定值，而不是将其直接转储到其主体中。 生成干净CSS：

a, b { margin-left: auto; margin-right: auto; display: block; } a { background: pink; height: 10em; } b { background: blue; height: 90px; }

结论 (Conclusion)

So there you have it. I hope I’ve made it clear not only what mixins and placeholders are for, but also when you should use them and what effect they will have on the compiled CSS.

所以你有它。 我希望我不仅弄清楚了mixin和占位符的用途，而且还明确了何时使用它们以及它们对已编译CSS有何影响。

If you have anything to add regarding your experiences with these features in CSS preprocessors, feel free to share them in the comments.

如果您需要增加有关CSS预处理器中这些功能的使用体验的信息，请随时在注释中分享它们。

This article was translated into French by Pierre Choffé on La Cascade

本文由PierreChoffé在La Cascade上翻译成法文

翻译自: https://www.sitepoint.com/sass-mixin-placeholder/