يضيف الأمر @for الأنماط في حلقة ، تشبه إلى حد كبير حلقة for في JavaScript. يتم استخدام @for بطريقتين: "البدء من خلال النهاية" أو "البدء حتى النهاية". والفرق الرئيسي هو أن "البداية إلى النهاية" تستثني الرقم النهائي ، و "البدء من خلال النهاية" يتضمن الرقم النهائي. إليك مثال البدء من خلال النهاية:

for $ i من 1 إلى 12 {
.col - # {$ i} {width: 100٪ / 12 * $ i؛ }
}

الجزء #{$i} هو بناء الجملة لدمج متغير ( i ) مع النص لإنشاء سلسلة. عندما يتم تحويل ملف Sass إلى CSS ، يبدو كالتالي:

.col-1 {
العرض: 8.33333٪ ؛
}

.col-2 {
العرض: 16.66667٪ ؛
}

...

.col-12 {
العرض: 100 ٪.
}

هذه طريقة قوية لإنشاء تخطيط شبكة. لديك الآن اثني عشر خيارًا لعروض الأعمدة المتاحة كفئات CSS.

اكتب @for directive الذي يأخذ متغير $j من 1 إلى 6. يجب أن ينشئ 5 فئات تسمى .text-1 إلى .text-5 حيث يكون لكل مجموعة font-size إلى 10px مضروبًا في الفهرس.

```yml tests: - text: '' testString: 'assert(code.match(/@for /g), "Your code should use the @for directive.");' - text: '' testString: 'assert($(".text-1").css("font-size") == "10px", "Your .text-1 class should have a font-size of 10px.");' - text: '' testString: 'assert($(".text-2").css("font-size") == "20px", "Your .text-2 class should have a font-size of 20px.");' - text: يجب أن يكون للفئة .text-3 font-size يبلغ 30 بكسل. testString: 'assert($(".text-3").css("font-size") == "30px", "Your .text-3 class should have a font-size of 30px.");' - text: '' testString: 'assert($(".text-4").css("font-size") == "40px", "Your .text-4 class should have a font-size of 40px.");' - text: يجب أن يكون للفئة .text-5 font-size يبلغ 50 بكسل. testString: 'assert($(".text-5").css("font-size") == "50px", "Your .text-5 class should have a font-size of 50px.");' ```