mixins

Allows you to define styles that can be reused throughout the style sheet. It allows you to reproduce CSS complete rules in a Sass document 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 several times in your style sheet and you know that code repetition is very bad and laborious. To work around this, type mixins for these 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 do not have to repeat those three lines every time you need to apply to an element, you simply include mixin .

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

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

$height by 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

These are classes that are not generated when 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 % instead of . . They also follow the same naming rules as 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 @extend that inherits properties from a CSS/SCSS. selector

Here's how to use it:

.container {
  @extend %center;
}

When doing this, Sass will get the contents of %center and apply it to .container . You can also extend the CSS selectors, like this:

.table-zebra {
  @extend .table;

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

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

Which one to use?

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

In short, if you need variables with more flexible / dynamic / preciseChange code, use mixin instead, if you need a placeholder grouped code.

There are two reasons for this:

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

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

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

Did you see duplicate CSS?

This is not bad, but if you have mixins on dozens of lines mixins and being used multiple times in a project, those three lines could easily become 300.

Now with placeholder, the SCSS generated will be:

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

Did you realize that here you generated a grouping instead of duplicating the code?

The compilation takes advantage of grouping selector without any repeated styles. So whenever you want to avoid writing the same properties, knowing that they will never change use CSS . 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 placeholder a (tamanhos, cores, etc) 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