الوراثة في SASS

تشرح هذه المقالة الوراثة في SASS۔

سنشرح الوراثة في SASS بأمثلة عملية۔

YouTube Video

الوراثة في SASS

الوراثة في SASS (@extend) هي آلية تسمح لك بتطبيق أنماط أحد المحددات إلى محدد آخر بدون تكرار۔ نظرًا لأن نفس الأنماط يتم 'دمجها' وإخراجها لعدة عناصر في الشيفرة، فإن CSS الناتج أقل عرضة للتكرار؛ ومع ذلك، إذا تم استخدامه بشكل غير صحيح فقد يؤدي ذلك إلى دمج غير مقصود بين المحددات.۔

الأساسيات: كيفية استخدام @extend

فيما يلي مثال أساسي حيث أن .btn--primary ترث أنماط .btn۔ @extend هي توجيه يمدد محدد الهدف۔

 1// Base button styles
 2.btn {
 3  padding: 0.5rem 1rem;
 4  border-radius: 4px;
 5  border: 1px solid #ccc;
 6  background: white;
 7  color: #333;
 8}
 9
10/* Primary button extends the base .btn */
11.btn--primary {
12  @extend .btn;
13  background: #007bff;
14  color: white;
15}

• عند استخدام @extend، ترث .btn--primary الأنماط الأساسية لـ .btn وتقوم بتعديل الأجزاء اللازمة فقط.۔

الـ CSS الناتج

 1.btn, .btn--primary {
 2  padding: 0.5rem 1rem;
 3  border-radius: 4px;
 4  border: 1px solid #ccc;
 5  background: white;
 6  color: #333;
 7}
 8
 9.btn--primary {
10  background: #007bff;
11  color: white;
12}

أفضل ممارسة: استخدام العناصر البديلة (%placeholder)

محددات العناصر النائبة (%name) هي محددات لا يتم إخراجها إلى CSS۔ يتم استخدامها على نطاق واسع خاصةً عندما ترغب في مشاركة الأنماط الشائعة بأمان بشكل خاص للميراث عبر عدة مكونات۔

 1// %placeholder will not be output directly
 2%card-base {
 3  padding: 1rem;
 4  border-radius: 6px;
 5  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 6  background: #fff;
 7}
 8
 9/* Components extend the placeholder */
10.card {
11  @extend %card-base;
12  border: 1px solid #eee;
13}
14
15.panel {
16  @extend %card-base;
17  border: 1px solid #ddd;
18}

• كل من .card و .panel ترثان من %card-base، مما يسمح لهما بمشاركة أنماط مشتركة مع إضافة الاختلافات عند الحاجة.۔

الـ CSS الناتج

 1.card, .panel {
 2  padding: 1rem;
 3  border-radius: 6px;
 4  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 5  background: #fff;
 6}
 7
 8.card {
 9  border: 1px solid #eee;
10}
11
12.panel {
13  border: 1px solid #ddd;
14}

الوراثة المتعددة (عدة توجيهات @extend)

يمكنك وراثة عدة عناصر بديلة أو فئات في نفس الوقت.۔ على الرغم من أن قابلية إعادة استخدام الأنماط تتحسن، من المهم تتبع أي القواعد تم دمجها مع أي محددات۔

 1%btn-base {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  border-radius: 3px;
 5}
 6
 7%btn-large {
 8  padding: 0.75rem 1.5rem;
 9  font-size: 1.125rem;
10}
11
12/* Composite button that extends both placeholders */
13.btn--lg {
14  @extend %btn-base;
15  @extend %btn-large;
16  background: #222;
17  color: #fff;
18}

• هذا مثال حيث يرث زر عنصرين بديلين، أحدهما للأساس والآخر للحجم.۔
• ترث .btn--lg كل من %btn-base و %btn-large، مما يجمع بين التخطيط الأساسي والحجم الأكبر.۔

الـ CSS الناتج

1.btn--lg {
2  display: inline-block;
3  /* %btn-large overrides the padding from %btn-base */
4  padding: 0.75rem 1.5rem;
5  border-radius: 3px;
6  font-size: 1.125rem;
7  background: #222;
8  color: #fff;
9}

سلوك @extend (آلية الدمج) والتحذيرات حول 'انفجار المحددات'

@extend يُخرج جميع المحددات المتطابقة مدمجة معًا، مما قد يؤدي أحيانًا إلى مجموعات غير مقصودة من المحددات.۔

يوضح المثال التالي كيف يمكن أن يزداد الإخراج عند تمديد نفس الفئة الأساسية في أماكن متعددة.۔

 1/* Many components extend .utility */
 2/* A generic utility class */
 3.utility {
 4  margin-bottom: 1rem;
 5}
 6
 7/* Nested selectors that extend .utility */
 8.header {
 9  @extend .utility;
10  .title {
11    font-weight: bold;
12  }
13}
14
15.footer {
16  @extend .utility;
17  .note {
18    color: #888;
19  }
20}
21
22.article {
23  @extend .utility;
24  .content {
25    line-height: 1.6;
26  }
27}
28
29.sidebar {
30  @extend .utility;
31  .section {
32    padding: 1rem;
33  }
34}

• عند وراثة عدة مكونات للفئة .utility، يتم دمج المحددات في محدد واحد، وفي المشاريع الكبيرة يمكن أن يؤدي ذلك إلى تضخم ملف الـ CSS.۔

الـ CSS الناتج

 1.utility,
 2.header,
 3.footer,
 4.article,
 5.sidebar {
 6  margin-bottom: 1rem;
 7}
 8
 9.header .title {
10  font-weight: bold;
11}
12
13.footer .note {
14  color: #888;
15}
16
17.article .content {
18  line-height: 1.6;
19}
20
21.sidebar .section {
22  padding: 1rem;
23}

@extend والفئات (.class) مقابل محددات العناصر (الوسوم) — الأولوية والآثار الجانبية

يمكن تطبيق @extend ليس فقط على الفئات بل أيضاً على محددات العناصر. ومع ذلك، توسيع العناصر يزيد من نطاق التأثير، مما يرفع من خطر تطبيق القواعد بشكل غير مقصود في أماكن غير مرغوبة۔

فيما يلي مثال على تمديد محدد عنصر والتأثير الذي يمكن أن يحدثه.۔

 1/* Extending an element selector (not recommended) */
 2h1 {
 3  font-size: 2rem;
 4  margin-bottom: 0.5rem;
 5}
 6
 7/* If you extend h1, the resulting selector will include your class with h1 */
 8.title {
 9  @extend h1;
10  color: #333;
11}
12
13/* Output becomes:
14h1, .title { font-size: 2rem; margin-bottom: 0.5rem; }
15*/

• في هذا المثال، وراثة محدد العنصر h1 يؤدي إلى دمج .title مع نفس أنماط h1.۔
• قد يبدو ذلك مناسبًا في الحالات الصغيرة النطاق، ولكن مع نمو مشروعك، قد تتداخل قواعد لـh1 بشكل غير متوقع مع .title، مما يجعل الأنماط أكثر تعقيدًا ويقلل من سهولة صيانتها۔ لذلك، يُفضّل تصميم الأنماط بالاعتماد بشكل أساسي على الفئات والعناصر النائبة لجعلها أسهل في الصيانة۔

الـ CSS الناتج

1h1,
2.title {
3  font-size: 2rem;
4  margin-bottom: 0.5rem;
5}
6
7.title {
8  color: #333;
9}

حالات استخدام @extend و!optional

إذا حددت !optional مع @extend، يمكنك منع حدوث الأخطاء عندما لا يوجد هدف الميراث۔ يكون هذا مفيدًا بشكل خاص في الشيفرات الشبيهة بالمكتبات أو في الحالات التي يتم فيها تعريف العناصر النائبة بشكل شرطي۔

فيما يلي مثال على محاولة آمنة لوراثة فئة قد لا تكون موجودة باستخدام !optional.۔

1/* Try to extend a class that might not exist */
2.component {
3  @extend .maybe-existing !optional;
4  padding: 1rem;
5}

• إذا لم تكن .maybe-existing موجودة، فلن يحدث شيء وسيتم تجاهل الامتداد.۔ يمكنك استخدام هذا عندما ترغب في محاولة الامتداد بشكل آمن.۔

الـ CSS الناتج

1.component {
2  padding: 1rem;
3}

مقارنة بين @extend و Mixins (@mixin / @include)

@extend و @mixin لديهما أحيانًا أغراض متداخلة، ولكن نواتجهما وحالات استخدامهما تختلف.۔

• @extend

  • يقلل الـ CSS الناتج التكرار عن طريق دمج المحددات.۔
  • نظرًا لأنه يتم دمج المحددات بعد الإنشاء، فقد تحدث مجموعات غير مقصودة.۔
  • لا يمكن تمرير المعطيات (رغم أنه يمكن تعويض ذلك باستخدام العناصر البديلة معًا).۔

• @mixin / @include

  • كل استدعاء يكرر الأنماط (مما يؤدي إلى إخراج متكرر).۔
  • يمكنك تمرير المعطيات وإضافة منطق برمجي مثل الشروط أو الحلقات.۔
  • الناتج يكون أكثر قابلية للتنبؤ، لكن حجم الملف يزداد.۔

أدناه مقارنة بين استخدام كل من @mixin و@extend لتنفيذ نفس أنماط الأزرار.۔

 1/* Mixin approach */
 2@mixin btn-styles($bg, $color) {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  background: $bg;
 6  color: $color;
 7  border-radius: 4px;
 8}
 9
10/* Use mixin */
11.btn {
12  @include btn-styles(white, #333);
13}
14
15.btn--primary {
16  @include btn-styles(#007bff, white);
17}
18
19/* Extend approach (shared placeholder) */
20%btn-base {
21  display: inline-block;
22  padding: 0.5rem 1rem;
23  border-radius: 4px;
24}
25
26.btn2 {
27  @extend %btn-base;
28  background: white;
29  color: #333;
30}
31
32.btn2--primary {
33  @extend %btn-base;
34  background: #007bff;
35  color: white;
36}

• @mixin يسمح لك بإدخال الأنماط بمرونة، في حين أن @extend يدمج الإخراج بكفاءة، لذا يمكنك استخدام كل منهما حسب الحالة المناسبة.۔

الـ CSS الناتج

الإخراج من @mixin

 1.btn {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  background: white;
 5  color: #333;
 6  border-radius: 4px;
 7}
 8
 9.btn--primary {
10  display: inline-block;
11  padding: 0.5rem 1rem;
12  background: #007bff;
13  color: white;
14  border-radius: 4px;
15}

الإخراج من @extend

 1.btn2,
 2.btn2--primary {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn2 {
 9  background: white;
10  color: #333;
11}
12
13.btn2--primary {
14  background: #007bff;
15  color: white;
16}

إرشادات عملية

الميراث في SASS هو ميزة قوية لزيادة قابلية إعادة استخدام الأنماط۔ ومع ذلك، قد يؤدي الاستخدام غير الصحيح إلى جعل دمج الأنماط معقدًا ويقلل من سهولة الصيانة.۔ فيما يلي بعض النقاط الرئيسية لاستخدام الميراث بشكل آمن وفعّال۔

• استخدم العناصر النائبة للأنماط الشائعة البحتة للمكونات مثل الهيكل والتخطيط۔ بالإضافة إلى ذلك، إذا كنت بحاجة إلى معاملات ديناميكية، يمكنك استخدام @mixin۔
• يجب عليك تجنب وراثة عناصر HTML مباشرة مثل h1۔ قد تحدث مجموعات من المحددات غير المقصودة، مما قد يؤدي إلى توليد CSS غير متوقع۔
• استخدام قواعد تسمية مثل BEM أو بادئات واضحة لبيان وظيفة كل عنصر بديل يساعد في الحفاظ على الأمان.۔
• من الأكثر أمانًا استخدام @extend داخل نفس الملف۔ خاصةً في المشاريع الكبيرة، يُنصح بتصميم الميراث ضمن نطاق كل مكون لتسهيل تتبع علاقات الميراث۔

الملخص

ميزة @extend في SASS هي وسيلة مريحة لإعادة استخدام الأنماط الشائعة بكفاءة وضمان تناسق التصميم۔ ومع ذلك، نظرًا لأن مجموعات المحددات يمكن أن تصبح معقدة بسهولة، من الضروري استخدام هذه الميزة بحذر وفي نطاق محدود۔ من خلال تجميع الأنماط المشتركة باستخدام محددات العناصر النائبة (%placeholder) واستخدام @mixin للأجزاء التي تتطلب معاملات ديناميكية، يمكنك الحفاظ على تصميم بسيط وسهل الصيانة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video