Sass @extend والوراثة
- الصفحة السابقة Sass @mixin
- الصفحة التالية النصوص Sass
تعليمات 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).
- الصفحة السابقة Sass @mixin
- الصفحة التالية النصوص Sass