@while
指令是一个与JavaScript while
循环具有类似功能的选项。它会创建CSS规则,直到满足条件。 @for
挑战给出了一个创建简单网格系统的示例。这也适用于@while
。 $ x:1;首先,定义变量
@while $ x <13 {
.col - #{$ x} {width:100%/ 12 * $ x;}
$ x:$ x + 1;
}
$x
并将其设置为1.接下来,使用@while
指令创建网格系统, 而 $x
小于13.在设置width
的CSS规则后, $x
增加1以避免无限循环。 @while
创建一系列具有不同font-sizes
的类。从text-1
到text-10
应该有10个不同的类。然后将font-size
设置为5px乘以当前索引号。确保避免无限循环! @while
指令。
testString: 'assert(code.match(/@while /g), "Your code should use the @while
directive.");'
- text: 您的代码应将索引变量设置为1才能启动。
testString: 'assert(code.match(/\$.*:\s*?1;/gi), "Your code should set an index variable to 1 to start.");'
- text: 您的代码应该递增计数器变量。
testString: 'assert(code.match(/\$(.*):\s*?\$\1\s*?\+\s*?1;/gi), "Your code should increment the counter variable.");'
- text: 您的.text-1
类的font-size
为5px。
testString: 'assert($(".text-1").css("font-size") == "5px", "Your .text-1
class should have a font-size
of 5px.");'
- text: 您的.text-2
类的font-size
为10px。
testString: 'assert($(".text-2").css("font-size") == "10px", "Your .text-2
class should have a font-size
of 10px.");'
- text: 您的.text-3
类的font-size
为15px。
testString: 'assert($(".text-3").css("font-size") == "15px", "Your .text-3
class should have a font-size
of 15px.");'
- text: 您的.text-4
类的font-size
为20px。
testString: 'assert($(".text-4").css("font-size") == "20px", "Your .text-4
class should have a font-size
of 20px.");'
- text: 您的.text-5
类的font-size
为25px。
testString: 'assert($(".text-5").css("font-size") == "25px", "Your .text-5
class should have a font-size
of 25px.");'
- text: 您的.text-6
类的font-size
为30px。
testString: 'assert($(".text-6").css("font-size") == "30px", "Your .text-6
class should have a font-size
of 30px.");'
- text: 您的.text-7
类的font-size
为35px。
testString: 'assert($(".text-7").css("font-size") == "35px", "Your .text-7
class should have a font-size
of 35px.");'
- text: 您的.text-8
类的font-size
为40px。
testString: 'assert($(".text-8").css("font-size") == "40px", "Your .text-8
class should have a font-size
of 40px.");'
- text: 您的.text-9
类的font-size
为45px。
testString: 'assert($(".text-9").css("font-size") == "45px", "Your .text-9
class should have a font-size
of 45px.");'
- text: 您的.text-10
类的font-size
为50px。
testString: 'assert($(".text-10").css("font-size") == "50px", "Your .text-10
class should have a font-size
of 50px.");'
```
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
```