3.4 KiB
3.4 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d7dbe367417b2b2512bb9 | Use @for to Create a Sass Loop | 0 |
Description
@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 ٪.
}
Instructions
@for
directive الذي يأخذ متغير $j
من 1 إلى 6. يجب أن ينشئ 5 فئات تسمى .text-1
إلى .text-5
حيث يكون لكل مجموعة font-size
إلى 10px مضروبًا في الفهرس. Tests
tests:
- text: ''
testString: 'assert(code.match(/@for /g), "Your code should use the <code>@for</code> directive.");'
- text: ''
testString: 'assert($(".text-1").css("font-size") == "10px", "Your <code>.text-1</code> class should have a <code>font-size</code> of 10px.");'
- text: ''
testString: 'assert($(".text-2").css("font-size") == "20px", "Your <code>.text-2</code> class should have a <code>font-size</code> of 20px.");'
- text: يجب أن يكون للفئة <code>.text-3</code> <code>font-size</code> يبلغ 30 بكسل.
testString: 'assert($(".text-3").css("font-size") == "30px", "Your <code>.text-3</code> class should have a <code>font-size</code> of 30px.");'
- text: ''
testString: 'assert($(".text-4").css("font-size") == "40px", "Your <code>.text-4</code> class should have a <code>font-size</code> of 40px.");'
- text: يجب أن يكون للفئة <code>.text-5</code> <code>font-size</code> يبلغ 50 بكسل.
testString: 'assert($(".text-5").css("font-size") == "50px", "Your <code>.text-5</code> class should have a <code>font-size</code> of 50px.");'
Challenge Seed
<style type='text/sass'>
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
Solution
// solution required