Why use mixins?

Question

Why use mixins?

Why use mixins in preprocessors?

If we can create a special class.

For example there is such an html structure:

.default {
  text-align: center;
  backgorund-color: black;
}

<div class='wrapper'>
  <div class='child'>
  </div>
</div>

Basically, we can create a mixin and apply it to wrapper and to child. Or we can also set the .default class to both blocks.

Then the question is, why do preprocessors exist at all? Or are there any moments when it is better to use one, and when the other? Or the browser at all will it perceive both options the same way(i.e. it doesn't care if these styles are applied to the element directly or via another class)?

3

вёрстка оптимизация sass less организация

Author: uzi_no_uzi, 2018-05-20

Source

1 answers

score 2 · Accepted Answer

In large projects, mixins are convenient if the code is repeated or has nested classes, there is no difference in the above example, but if the structure is more complex, mixins can be used profitably, here is an example from the documentation https://sass-scss.ru/documentation/miksini/ispolzovanie_miksina.html

In general, preprocessors greatly speed up the creation of css, if you get used to them and write quickly, I try to switch to sass with emmet.