When is it better to use @extend, when is it better to use @include, and when is it better to use a mix of classes in SASS?

Question

Layout

There is an abstract page

.header
  .container                                              // 1-йвариант
    .header__logo
    .header__search
    .header__menu
.content
  .content__line
    .intro.container                                    // 2-й вариант
  .content__line
    .article                                                 // 3-й и 4-й варианты
.footer

I'm using the SASS preprocessor.
.container class styles

.container {
  width: 960px;
  margin: 0 auto;
}

If you take .header, .intro, .article, .footer - they should all be centered. How best to apply parameters from the .container class to them:

• nest it (1st option)
  
• mix (2nd option)
  
• use @extend or as mixin via @include
  

The same is the case with the grid or other styles from which others are inherited. Bootstrape uses mixing, then you get a large number of classes for one tag, how bad is that?
I know the difference between @extend and @include. With @extend , the code will not be copied, only the set of selectors to which the parameters will be applied, but how good it is when debugging, because the parameters for one selector will be scattered throughout the css file.
What is more effective to use and when?

Answer 1

I think it's better to include a mixin with horizontal and vertical alignment (depending on what you want)

@mixin centerer($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}

.container лучше прописывать в html, код более читаемый будет