Использование mixin без параметров более эффективно, чем расширение

Question

Я просмотрел много статей в Интернете и полностью запутался.Может ли кто-нибудь уточнить ниже

Использование mixin без параметров более эффективно, чем использование extend

Answer 1

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

Вот что я имею в виду.

Миксин

@mixin mixin(){
    color: blue;
}

.selector-1{
     @include mixin();
}

.selector-2{
     @include mixin();
}

Компилируется в

.selector-1 {
    color: blue;
}
.selector-2 {
    color: blue;
}

---

Расширение класса

.extend{
    color: blue;
}

.selector-1{
    @extend .extend;
}

.selector-2{
    @extend .extend;
}

Компилируется в

.extend, .selector-1, .selector-2 {
    color: blue;
}

Так вС точки зрения эффективности расширение класса приведет к уменьшению размера скомпилированного файла, поэтому Sass предлагает в первую очередь функцию extend.