@for
الأنماط في حلقة ، تشبه إلى حد كبير حلقة for
في JavaScript. يتم استخدام @for
بطريقتين: "البدء من خلال النهاية" أو "البدء حتى النهاية". والفرق الرئيسي هو أن "البداية إلى النهاية" تستثني الرقم النهائي ، و "البدء من خلال النهاية" يتضمن الرقم النهائي. إليك مثال البدء من خلال النهاية: for $ i من 1 إلى 12 {الجزء
.col - # {$ i} {width: 100٪ / 12 * $ i؛ }
}
#{$i}
هو بناء الجملة لدمج متغير ( i
) مع النص لإنشاء سلسلة. عندما يتم تحويل ملف Sass إلى CSS ، يبدو كالتالي: .col-1 {هذه طريقة قوية لإنشاء تخطيط شبكة. لديك الآن اثني عشر خيارًا لعروض الأعمدة المتاحة كفئات CSS.
العرض: 8.33333٪ ؛
}
.col-2 {
العرض: 16.66667٪ ؛
}
...
.col-12 {
العرض: 100 ٪.
}
@for
directive الذي يأخذ متغير $j
من 1 إلى 6. يجب أن ينشئ 5 فئات تسمى .text-1
إلى .text-5
حيث يكون لكل مجموعة font-size
إلى 10px مضروبًا في الفهرس. @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.");'
```
Hello
Hello
Hello
Hello
Hello
```