extend@ در Sass به شما امکان می‌دهد یک Selector دیگر را به ارث ببرید و قوانین آن را به Selector فعلی اعمال کنید.

۱️⃣ تعریف extend@

• با extend@ می‌توان یک کلاس یا سلکتور موجود را به کلاس جدید اضافه کرد

• باعث کاهش تکرار کد و خواناتر شدن CSS می‌شود

مثال ساده

.message {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.success {
  @extend .message;
  border-color: green;
  background-color: #d4edda;
}

.error {
  @extend .message;
  border-color: red;
  background-color: #f8d7da;
}

📌 خروجی CSS:

.message, .success, .error {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.success {
  border-color: green;
  background-color: #d4edda;
}

.error {
  border-color: red;
  background-color: #f8d7da;
}

۲️⃣ مزایای extend@

• جلوگیری از تکرار کدها

• مدیریت قوانین مشترک آسان‌تر

• CSS تولید شده کوتاه‌تر و خواناتر

۳️⃣ نکات مهم

1. @extend فقط برای Selectorها کار می‌کند، نه ویژگی‌ها

2. بهتر است از میکسین‌ها برای کدهای پویا یا پارامتری استفاده شود

3. استفاده بیش از حد از @extend در پروژه‌های بزرگ می‌تواند باعث ترکیب بیش از حد Selectorها شود

۴️⃣ مثال ترکیبی

// Base style
.button {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  color: white;
}

// Extended styles
.btn-primary {
  @extend .button;
  background-color: #3498db;
}

.btn-secondary {
  @extend .button;
  background-color: #2ecc71;
}

📌 خروجی CSS:

.button, .btn-primary, .btn-secondary {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  color: white;
}

.btn-primary {
  background-color: #3498db;
}

.btn-secondary {
  background-color: #2ecc71;
}

۵️⃣ تفاوت extend@ و mixin@