---
title: Use @for to Create a Sass Loop
localeTitle: استخدم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](https://sass-guidelin.es/#loops)

قد تكون حلقة `@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` ؛
*   دائماً سطر فارغ جديد بعد قوس الإغلاق (}) إلا إذا كان السطر التالي هو قوس إغلاق (}).