Когда лучше использовать @extend, когда @include, а когда микс классов в SASS?

Question

[ROBsoer]

Есть абстрактная страница

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

Использую препроцессор SASS.
Стили класса .container

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

Если взять .header, .intro, .article, .footer - они все должны быть отцентрированы. Как лучше применить к ним параметры из класса .container:

• вложить его (1-й вариант)
  
• замиксовать (2-й вариант)
  
• использовать @extend или как миксин через @include
  

Тоже самое в случае с сеткой или другими стилями, от которых наследуются другие. В bootstrape используется миксование, потом получается большое количество классов к одному тегу, насколько это плохо?
Разницу между @extend и @include я знаю. При @extend код не будет копироваться, только набор селекторов к которым применятся параметры, но наскольно это хорошо при дебаггинге, ведь параметры для одного селектора будут разсбросаны по всему css-фаайлу.
Что эффективнее использовать и когда?

Answer 1

[Алексей]

Я думаю лучше инклюдить миксин с заданием выравнивания по горизонтали и по вертикали (в зависимости от того, что надо)

@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, код более читаемый будет

Comments

[ROBsoer]

Спасибо за ответ!
Но вопрос не в том какие стили применить к классу (как по мне, использование абсолютов очень спорно), а как применить этот клас и почему. В чем преимущество использования миксина? Я вижу недостаток - дублирование кода в выходном CSS, что плохо для производительности.