Sass: передача блоков кода с помощью примесей и выбор межу mixin и extend

@mixin прекрасный способ обеспечить возможность повторного использования кода в ваших проектах, кроме того, они обладают возможностью принимать аргументы, что делает их мощным и гибким инструментом. @extend дает вам возможность снова использовать код, указывая селектору необходимость наследовать стили другого селектора. С определенной точки зрения они делают одно и то же. Так когда стоит использовать mixin, а когда extend?

Но для начала, поговорим о том, как вы можете передавать блоки кода с помощью примесей вместо передачи аргументов.

Передача блоков кода

Для этого вы должны добавить @content;, который будет направлять блок, который вы передаете с помощью mixin:

@mixin button {  
   font-size: 1em;  
   padding: 0.5em 1.0em;  
   text-decoration: none;  
   color: #fff;  
   @content;  
}
.button-green {  
   @include button {  
      background: green  
   }
}

Свойства, указанные для button, передаются селектору .button-green с помощью mixin. Include добавляет еще одну линию, которая задает кнопке зеленый цвет. В итоге мы получим следующий код на CSS:

.button-green {  
  font-size: 1em;  
  padding: 0.5em 1.0em;  
  text-decoration: none;  
  color: #fff;  
  background: green;  
}

Есть другой способ сделать то же самое:

@mixin button {  
  @content;  
}
@include button {  
  .background-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: green;  
  }
};

Области видимости переменной и блоки контента

Когда блок контента передается с помощью примесей, его область видимости ограниченна селектором, которому он передается, а не @mixin. Это значит, что переменные, объявленные в примеси, не могут быть использованы в пределах этого блока.

$color: green;
@mixin button($color: #fff) {  
   color: $color;  
   @content;  
   border: 1px solid $color;  
}
.button-green {  
   @include button {background: $color;}  
}

Здесь объявлена глобальная переменная $color и переменная с идентичным именем в области видимости примеси. Внутри примеси $color имеет значение #fff. В то же время в блоке, добавленном в строке с include, переменная содержит значение green. После компиляции мы получим следующий код:

.button-green {  
   color: #fff;  
   background: green;  
   border: 1px solid #fff;  
}

@mixin or @extend

Оба эти метода помогают сделать код модульным и упрощают его повторное использование. Для того чтобы ответить на вопрос, заданный в названии статьи, давайте взглянем на этот код:

.button {  
  background: green;  
}
.button-1 {  
  @extend .button;  
}
.button-2 {  
  @extend .button;  
}

Использование extend позволяет нам добиться чистого кода:

.button, .button-1, .button-2 {  
  background: green;  
}

Обратите внимание, стили не повторяются, что значительно упрощает листинг. В случае с примесями результат выглядит иначе.

@mixin button {  
  background-color: green;  
}
.button-1 {  
  @include button;  
} 
.button-2 {  
  @include button;  
}

Превращается в:

.button {  
  background-color: green;  
}
.button-1 {  
  background-color: green;  
}
.button-2 {  
  background-color: green;  
}

Может показаться, что использование extend предпочтительней, но у этого варианта есть серьезные недостатки. Его использование создает связь между селекторами. Кроме того, размещение директивы extend в различных частях листинга значительно усложняет поддержку кода. Директива не обладает гибкостью, свойственной примесям. Вы не можете передавать ей аргументы, так что придется довольствоваться тем, что вы ей задали. Еще один минус ограниченность использования extend в медиазапросах: вы не можете использовать один блок extend в двух разных запросах.

Создание связи между селекторами самая большая проблема. Если вы имеете дело с однотипными элементами, например кнопками, вы можете использовать extend, но если речь идет о повторном использовании кода в различных элементах, лучше остановиться на примесях. Основное преимущество примесей их гибкость. Если возникает необходимость передавать блоку аргументы, ваш выбор mixin.

Повторение не такая уж страшная вещь, если его удаление незначительно сокращает вес файла. При этом повторение в источниках значительно усложняет поддержку кода. Использование примесей даст вам чистые исходники, но приведет к повторениям в скомпилированном коде. При этом стоит помнить, что использование некоторых средств минимизации все равно приведет к объединению одинаковых стилей несвязанных элементов.

Заключение

Используйте extend, когда набор правил, который вы передаете, используется для однотипных элементов. Используйте примеси для динамичной вставки повторяемых блоков кода для различных элементов. Кроме того, стоит помнить, что примеси эффективней с точки зрения производительности.