۰ Mahdi Mohaqeq
تفاوت mixin و extend
جامعه Html & CSS ایجاد شده در ۰۶ مهر ۱۴۰۰

همونطوری که مشاهده کردیم، هنگامی که از 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;
}