freeCodeCamp

3.4 KiB

Raw Blame History

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 {
العرض: 8.33333٪ ؛
}

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

...

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

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

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

3.4 KiB Raw Blame History