التكرار في SASS

تشرح هذه المقالة كيفية التعامل مع التكرار في SASS۔

سنشرح كيفية تنفيذ التكرار في SASS خطوة بخطوة، باستخدام أمثلة حقيقية من الشيفرة۔

YouTube Video

التكرار في SASS

يساعد التكرار في SASS على تجنب تكرار الشيفرة ويسمح لك بإنشاء أنماط مرنة وقابلة لإعادة الاستخدام۔

أسباب استخدام التكرار في SASS

هناك عدة مزايا لاستخدام التكرار، من بينها ما يلي:۔

• قابلية إعادة الاستخدام للشيفرة تتحسن، مما يسهل إنشاء أنماط متشابهة۔
• سهولة الصيانة تزداد، مما يجعل من السهل تغيير الأنماط دفعة واحدة۔
• يقلل من الأخطاء أيضًا۔

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

بناء الجملة المستخدم للتكرار في SASS

بنية التكرار الرئيسية المستخدمة في SASS هي كما يلي:۔

• باستخدام @for، يمكنك تنفيذ تكرار على مجموعة معينة من الأرقام۔
• باستخدام @each، يمكنك التكرار على القوائم أو الجداول (المابس) أثناء التكرار۔
• باستخدام @while، يمكنك التكرار حتى يتم تحقيق شرط معين۔

التكرار باستخدام @for

@for ينفذ المعالجة التكرارية بناءً على مجموعة محددة من الأرقام۔

الصياغة

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/

• حدد قيم البداية والنهاية لـ <start> و <end>۔ استخدام to يستثني قيمة النهاية، بينما through يشملها۔

مثال

يكوّن الكود التالي تلقائيًا أصناف ذات سماكات حدود تزداد بمقدار 1px في كل مرة۔

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}

• يقوم هذا الكود تلقائيًا بإنشاء أصناف (كلاسات) لسماكات حدود تزداد بمقدار 1px في كل مرة۔ تم استخدام تعليمة @for هنا للتكرار من 1 إلى 5۔

الشيفرة الناتجة (CSS)

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}

• سيتم توليد أصناف من .border-1 إلى .border-5 بشكل متتابع، مع زيادة سماكة الحد بمقدار 1px في كل مرة۔

التكرار باستخدام @each

@each يقوم بتكرار باستخدام القوائم أو الخرائط (المابس)۔ إنه مفيد عندما ترغب في إنشاء أصناف متكررة بشكل فعال۔

الصياغة

1/*
2@each $item in <list> {
3  ...
4}
5*/

مثال 1: باستخدام قائمة

ينشئ الكود التالي عدة أصناف لألوان النص۔

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}

• يقوم هذا الكود تلقائيًا بإنشاء أصناف لألوان النص لكل لون في القائمة۔ تم استخدام تعليمة @each لمعالجة كل قيمة في القائمة بشكل متتابع۔

الشيفرة الناتجة (CSS)

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}

• عند تحويل ملف SASS إلى CSS، سيتم توليد أصناف مثل .text-red و .text-blue و .text-green لكل لون في القائمة۔

مثال 2: باستخدام خريطة (Map)

استخدام الخريطة (Map) يسمح لك بالتعامل مع أزواج من المفاتيح والقيم۔ في المثال التالي، تم تعريف ألوان خلفية الأزرار باستخدام خريطة (Map)۔

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

الشيفرة الناتجة (CSS)

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}

• عند تحويل ملف SASS إلى CSS، سيتم توليد أصناف مثل .bg-primary و .bg-success و .bg-danger لكل مفتاح في الخريطة۔

التكرار باستخدام @while

@while يواصل التكرار ما دام الشرط صحيحًا۔

الصياغة

1/*
2@while <condition> {
3  ...
4}
5*/

مثال

على سبيل المثال، إذا كنت تريد زيادة حجم الخط خطوة بخطوة، يمكنك كتابته على النحو التالي:۔

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}

• يمكنك استخدام تعليمة @while لمعالجة التكرار عند زيادة حجم الخط بشكل تدريجي۔ من خلال استخدام المتغير $i، يتم إنشاء أصناف تلقائيًا للقيم من 1 إلى 5۔

الشيفرة الناتجة (CSS)

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}

• عند تحويل ملف SASS إلى CSS، يتم إنشاء أصناف بأحجام خطوط تتزايد من 1rem إلى 5rem تلقائيًا۔

مثال متقدم: دمج التكرار مع التداخل (Nesting)

دمج التكرار مع خاصية التداخل في SASS يتيح إنشاء أنماط أكثر تقدمًا۔

مثال

فيما يلي مثال حيث يتم تعريف ألوان الخلفية وhover للأزرار معًا۔

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}

• من خلال الجمع بين التكرار والتعشيش في SASS، يمكنك إنشاء ألوان خلفية الأزرار وألوان التحويم دفعة واحدة۔ لكل لون في الخريطة، يتم إنشاء فئة .btn- وتحديد نمط :hover باستخدام التعشيش۔

الشيفرة الناتجة (CSS)

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}

• عند تحويل ملف SASS إلى CSS، يتم توليد لون الخلفية ولون التحويم لكل زر تلقائيًا، ويتم تعريف أنماط :hover جميعها معًا باستخدام التعشيش.۔

نقاط يجب مراعاتها عند استخدام التكرار

ضع في اعتبارك النقاط التالية عند استخدام التكرار لكتابة شيفرة أكثر كفاءة وسهولة في القراءة۔

1. تجنب التداخل العميق المفرط التداخل المفرط يقلل من قابلية القراءة، لذا اجعله في الحد الأدنى الضروري فقط۔

2. ضع في اعتبارك تأثيرات الأداء إذا تم إنشاء عدد كبير جدًا من الأصناف بالتكرار، قد يصبح CSS الخاص بك كبيرًا بشكل غير ضروري۔

3. استخدم أسماء متغيرات مناسبة بالنسبة للمتغيرات مثل $i أو $item، استخدم أسماء ذات معنى لجعل الشيفرة أسهل في الفهم۔

الملخص

يتيح استخدام التكرار في SASS تصميم أنماط فعال وسهل الصيانة۔ على وجه الخصوص، يسمح لك اختيار بين @for و @each و @while بإنشاء CSS ديناميكي ومرن۔

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

YouTube Video