Sass @extend والوراثة

تعليمات Sass @extend

تعليمات @extend التعليمات تسمح لك بمشاركة مجموعة من خصائص CSS من مبدأ اختيار إلى آخر.

إذا كان لديك عناصر بهم نفس النمط تقريبًا، ولكن يختلفون قليلاً في بعض التفاصيل، فإن تعليمات @extend التعليمات مفيدة جدًا.

في المثال التالي للSass، يتم إنشاء نمط أساسي للزر (هذا النمط سيتم استخدامه لأغلب الأزرار). ثم، يتم إنشاء نمط للزر "Report" ونمط للزر "Submit". زر "Report" وزر "Submit" يتم تنفيذه من خلال تعليمات @extend التعليمات تنقل جميع خصائص CSS للفئة .button-basic. بالإضافة إلى ذلك، فإنها تعرف ألوانًا خاصة بها:

تقنية 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 كالتالي:

إخراج 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 ، لا تحتاج إلى تحديد العديد من الفئات للعناصر في كود HTML، مثل:<button class="button-basic button-report">Report this</button>، بل يكفي تحديد .button-report للحصول على مجموعة من الأنماط.

تعليمات @extend تعليمات تساعد في الحفاظ على كود Sass الخاص بك جافًا جدًا (DRY).