اکستند (@extend)

«اکستند (@extend)» یعنی یک سلکتور از سلکتور دیگر ارث بری کند. بنابراین چند ویژگی مشترک را یک جا می نویسیم و بقیه جاها فقط تفاوت ها را می نویسیم. این کار کد را DRY نگه می دارد؛ مثل جزوه پایه و یادداشت های رنگی کنار آن.

ایده اصلی @extend

وقتی چند دکمه یا بخش، تقریباً یک جورند، یک کلاس پایه بساز. سپس کلاس های ویژه فقط تفاوت ها را بگویند و از پایه @extend کنند.

نمونه SCSS: کلاس پایه و دو دکمه

.button-basic {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report {
  @extend .button-basic;
  background-color: red;
}

.button-submit {
  @extend .button-basic;
  background-color: green;
  color: white;
}

مشاهده در ادیتور

خروجی CSS پس از ترنس پایل

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report {
  background-color: red;
}

.button-submit {
  background-color: green;
  color: white;
}

مشاهده در ادیتور

نکته: با @extend دیگر لازم نیست چند کلاس روی یک تگ ست کنی؛ یک کلاس فرزند کافی است.

سه گام عملی

1. یک کلاس پایه با ویژگی های مشترک بساز.
2. برای هر مورد ویژه، @extend را روی کلاس پایه بنویس.
3. فقط تفاوت ها را در کلاس های ویژه تنظیم کن.

ادامه مسیر: صفحه میکسین (@mixin) برای الگوهای تکراری عالی است. همچنین متغیرها (Variables) و تو در تو (Nesting) مدیریت کد را ساده تر می کنند. برای ثبات مسیر، اکستند (@extend) را نشانک کن.

جمع بندی سریع

• @extend ارث بری بین سلکتورها می دهد.
• کلاس پایه بنویس؛ تفاوت ها را جدا کن.
• کد CSS تمیزتر و DRY می شود.
• نیازی به چند کلاس روی تگ نیست.