freeCodeCamp/guide/arabic/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md

title, localeTitle

title	localeTitle
Use @for to Create a Sass Loop	استخدمfor لإنشاء Sass Loop

استخدمfor لإنشاء Sass Loop

1. البنية الأساسية لـ @for loop في @for :

• ل - من خلال حلقة:

@for $i from <start number> through <end number> {
  // some CSS
}

• ل- للحلقة:

@for $i from <start number> to <end number> {
  // some CSS
}

لاحظ أن الاختلاف الرئيسي هو أن "البداية إلى النهاية" تستبعد الرقم النهائي ، و "البدء من خلال النهاية" يتضمن الرقم النهائي.

2. فمثلا:

• ل - من خلال حلقة:

@for $i from 1 through 3 {
  // some CSS
}

// 1 2

• ل- للحلقة:

@for $i from 1 to 3 {
  // some CSS
}

// 1 2 3

3. المبدأ التوجيهي من المبادئ التوجيهية SASS

قد تكون حلقة @for مفيدة عند دمجها مع CSS :nth-* pseudo-classes. باستثناء هذه السيناريوهات ، تفضل حلقة @each إذا كان عليك التكرار أكثر من شيء ما.

@for $i from 1 through 10 {
  .foo:nth-of-type(#{$i}) {
    border-color: hsl($i * 36, 50%, 50%);
  }
}

استخدم دائمًا $i كاسم متغير للالتزام بالاتفاقية المعتادة وما لم يكن لديك سبب جيد بالفعل ، لا تستخدم الكلمة المفتاحية أبدًا: استخدمها دائمًا. العديد من المطورين لا يعرفون حتى Sass يقدم هذا الاختلاف. قد يؤدي استخدامها إلى الارتباك.

تأكد أيضًا من احترام هذه الإرشادات للحفاظ على سهولة القراءة:

• دائما خط جديد فارغ قبل @for ؛
• دائماً سطر فارغ جديد بعد قوس الإغلاق (}) إلا إذا كان السطر التالي هو قوس إغلاق (}).