Sass @extend و ارث‌بندی

دستور Sass @extend

دستور @extend دستور اجازه می‌دهد تا یک مجموعه از ویژگی‌های CSS از یک انتخابگر به انتخابگر دیگر به اشتراک گذاشته شود.

اگر شما عناصر تقریباً مشابهی دارید که تنها در برخی جزئیات کوچک تفاوت دارند، دستور @extend دستور بسیار مفید است.

مثال Sass زیر ابتدا یک استایل پایه برای دکمه ایجاد می‌کند (این استایل برای بیشتر دکمه‌ها استفاده خواهد شد). سپس، ما یک استایل برای دکمه "Report" و یک استایل برای دکمه "Submit" ایجاد می‌کنیم. دکمه‌های "Report" و "Submit" از دستور @extend دستورات از تمامی ویژگی‌های CSS کلاس .button-basic ارث می‌برند. علاوه بر این، آن‌ها رنگ‌های خود را نیز تعریف می‌کنند:

زبان 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) نگه دارید.