In Sass what is the difference between a mixin and a placeholder?

Question

The two have the same end result, but do not know which is the correct or which has better performance example:

%borda($circunferencia: 10px) {
  -webkit-border-radius: $circunferencia;
  border-radius: $circunferencia;
}

@mixin borda($circunferencia: 10px) {
  -webkit-border-radius: $circunferencia;
  border-radius: $circunferencia;
}

Answer 1

mixins

Allow you to define styles that can be reused across the style sheet. Allows you to play rules CSS complete in a document Sass and even have arguments that allows you to produce a wide variety of styles with very few mixins.

Imagine that you have some statements that are repeated over and over in your stylesheet and you know that the repetition of the code is very bad and laborious. To get around this write mixins for those repeated statements. Let’s take an example:

@mixin center() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
  @include center();
}

.image-cover {
  @include center();
}

That way you don’t have to repeat those three lines each time you need to apply an element, you simply include the mixin.

A very common example in style sheets are the definition of the Width e Height of elements, this problem can be solved with a mixin, for example.

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

$heightby default have the same value as $width and whenever you need to set height and width, you can do this:

.icon {
  @include size(32px);
}

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

Placeholders

Are classes that are not generated when the SCSS is compiled.

Example:

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

Similar to the classe we use in CSS, except for the prefix with the % instead of a .. In addition they follow the same nomenclature rules as the classes.

Now, if you try to compile your Sass/CSS, you will not see this code example in the generated file.

This code is useless until you use it @extend which aims to inherit properties from a selector CSS/SCSS.

See how to use it:

.container {
  @extend %center;
}

In doing so, the Sass will download the contents of %center and apply it to .container. You can also extend the selectors CSS, thus:

.table-zebra {
  @extend .table;

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

This is a very common case for the @extend. In this case, we ask that the .table-zebra class behaves exactly like the .table class and then add the specific rules of the zebra. Extending selectors is very convenient when you develop your website/system into modular components.

Which one to use?

It depends on the context and what you’re trying to do.

In short, if you need variables with a more flexible/dynamic/accurate codeDelter, use a mixin, on the contrary, if you need a grouped code placeholder.

There are two reasons for this:

1. You can’t use variables in a placeholder. Until you can, but you can’t pass variables to your methods so you can’t generate CSS context specific as you would with a mixin.
2. How Sass manipulates mixins makes it very inconvenient when you do not use them with variables. To put it simply: Sass will duplicate the mixin output each time you use it, resulting not only in duplicate CSS, but also in a great style sheet.

Considering the first example of code, the CSS output will be:

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

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

Observed the duplicate CSS?

That’s not bad, but if you have mixins in dozens of lines SCSS and being used several times in a project, these three lines could easily become 300.

Now with placeholder, the CSS will be generated:

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

He was able to notice that here he created a grouping instead of duplicating the code?

The compilation takes advantage of grouping selector without any repeated styles. Therefore, whenever you want to avoid writing the same properties, knowing that they will never change use placeholder. This will result in a much leaner compiled style sheet (with less code).

On the other hand, if you are willing to write the same properties in several places, but with different values (tamanhos, cores, etc) one mixin is the best. If you have a set of fixed values and variable values, you should try a combination of both.

%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) }
Neste caso, o mixin está estendendo o espaço reservado para valores fixos em vez de despejá-los diretamente em seu corpo. Isso gera CSS limpo:

a, b {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

a {
  background: pink;
  height: 10em;
}

b {
  background: blue;
  height: 90px;
}

I recommend the course: Learn Sass

_{Source: Sass: Sass Basics}