تفاوت mixin و extend

همونطوری که مشاهده کردیم، هنگامی که از mixin برای کپی کردن یک سری استایل تکراری استفاده میکنیم به ازای هر یک بار استفاده از اون، عینا میاد و تمامی استایل ها رو برامون در محلی که میخوایم قرار میده. که خب از لحاظ بهینه بودن اصلا مناسب این کار نیست.

گزینه ی دیگری وجود داره به اسم @extend.

تفاوت خروجی دو کد گویای تفاوت ها هست :

1. @mixin

کد scss :

@mixin btn{
    display: inline-block;
    border: 1px solid #efefef {
        radius: 10px;
    }
    font-size: 16px;
    padding: 5px 15px;
    color: #fff;
}

.btn-success{
    @include btn;
    background-color: orange;
    font-weight: bold;
}

.btn-danger{
    @include btn;
    background-color: greenyellow;
}

خروجی کد css :

.btn-success {
  display: inline-block;
  border: 1px solid #efefef;
  border-radius: 10px;
  font-size: 16px;
  padding: 5px 15px;
  color: #fff;
  background-color: orange;
  font-weight: bold;
}

.btn-danger {
  display: inline-block;
  border: 1px solid #efefef;
  border-radius: 10px;
  font-size: 16px;
  padding: 5px 15px;
  color: #fff;

  background-color: greenyellow;
}

2. @extend

کد sass :

%btn-default{
    display: inline-block;
    border: 1px solid #efefef {
        radius: 10px;
    }
    font-size: 16px;
    padding: 5px 15px;
    color: #fff;
}

.btn-info{
    @extend %btn-default;
    background-color: #8798e4;
}
.btn-warning{
    @extend %btn-default;
    background-color: yellow;
}

خروجی کد css :

.btn-warning, .btn-info {
  display: inline-block;
  border: 1px solid #efefef;
  border-radius: 10px;
  font-size: 16px;
  padding: 5px 15px;
  color: #fff;
}

.btn-info {
  background-color: #8798e4;
}

.btn-warning {
  background-color: yellow;
}