Sass @extend و ارث

Sass @extend امر

دستور @extend امر آپ کو کئی CSS امتیازیاں ایک انتخاب سے دوسرے انتخاب کو مشترک کرانے کی اجازت دیتا ہے。

اگر آپ نے تقریباً ایک سائٹل کا عناصر، لیکن کچھ چھوٹی تفصیلات میں فرق ہوتا ہے تو: دستور @extend امر بہت مفید ہوتا ہے。

درج ذیل Sass مثال میں پہلے بٹن کا بنیادی سائٹل بنایا جاتا ہے (یہ سائٹل زیادہ تر بٹنوں کے لئے استعمال کیاجائیگا)۔ بعد میں، "Report" بٹن کا سائٹل بنایا جاتا ہے، اور "Submit" بٹن کا سائٹل بنایا جاتا ہے۔ "Report" اور "Submit" بٹن دونوں کا کام آمر کے ذریعے کیا جاتا ہے: دستور @extend امر وارث شدگی دا فائدہ دیکھئے، .button-basic کی تمام CSS امتیازیاں وارث ہوتی ہیں۔ مزید برآمد، وہ اپنے اپنے رنگ بھی دینے کا کام کرتے ہیں:

SCSS ڈھانچہ:

.button-basic  {
  لبه: هیچ;
  پدینگ: 15 پیکسل 30 پیکسل;
  جذب‌کننده متن: مرکزی;
  اندازه فونت: 16 پیکسل;
  مؤشور: pointer;
}
.button-report  {
  @extend .button-basic;
  رنگ پس‌زمینه: قرمز;
}
.button-submit  {
  @extend .button-basic;
  رنگ پس‌زمینه: سبز;
  رنگ: سفید;
}

پس از ترجمه، CSS به صورت زیر خواهد بود:

خروجی CSS:

.button-basic, .button-report, .button-submit {
  لبه: هیچ;
  پدینگ: 15 پیکسل 30 پیکسل;
  جذب‌کننده متن: مرکزی;
  اندازه فونت: 16 پیکسل;
  مؤشور: pointer;
}
.button-report  {
  رنگ پس‌زمینه: قرمز;
}
.button-submit  {
  رنگ پس‌زمینه: سبز;
  رنگ: سفید;
}

با استفاده از دستور @extend ، شما نیازی ندارید که برای عناصر HTML کلاس‌های چندگانه تعیین کنید، به عنوان مثال：<button class="button-basic button-report">Report this</button>. شما تنها نیاز دارید که .button-report را مشخص کنید تا دو مجموعه استایل دریافت کنید.

دستور @extend دستورات به شما کمک می‌کنند تا کد Sass خود را بسیار خشک (DRY) نگه دارید.