2018-10-04 13:37:37 +00:00
---
id: 587d7dbf367417b2b2512bbb
title: Apply a Style Until a Condition is Met with @while
challengeType: 0
2019-08-05 16:17:33 +00:00
forumTopicId: 301454
2021-01-13 02:31:00 +00:00
dashedName: apply-a-style-until-a-condition-is-met-with-while
2018-10-04 13:37:37 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
The `@while` directive is an option with similar functionality to the JavaScript `while` loop. It creates CSS rules until a condition is met.
The `@for` challenge gave an example to create a simple grid system. This can also work with `@while` .
2019-05-14 12:01:32 +00:00
```scss
$x: 1;
@while $x < 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}
```
2020-11-27 18:02:05 +00:00
First, define a variable `$x` and set it to 1. Next, use the `@while` directive to create the grid system *while* `$x` is less than 13. After setting the CSS rule for `width` , `$x` is incremented by 1 to avoid an infinite loop.
# --instructions--
Use `@while` to create a series of classes with different `font-sizes` .
There should be 5 different classes from `text-1` to `text-5` . Then set `font-size` to `15px` multiplied by the current index number. Make sure to avoid an infinite loop!
# --hints--
Your code should use the `@while` directive.
```js
assert(code.match(/@while /g));
```
Your code should use an index variable which starts at an index of 1.
```js
assert(code.match(/\$.*:\s*?1;/gi));
```
Your code should increment the counter variable.
```js
assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
```
Your `.text-1` class should have a `font-size` of 15px.
```js
assert($('.text-1').css('font-size') == '15px');
```
Your `.text-2` class should have a `font-size` of 30px.
2018-10-04 13:37:37 +00:00
2020-11-27 18:02:05 +00:00
```js
assert($('.text-2').css('font-size') == '30px');
2018-10-04 13:37:37 +00:00
```
2020-11-27 18:02:05 +00:00
Your `.text-3` class should have a `font-size` of 45px.
2018-10-04 13:37:37 +00:00
2020-11-27 18:02:05 +00:00
```js
assert($('.text-3').css('font-size') == '45px');
```
Your `.text-4` class should have a `font-size` of 60px.
```js
assert($('.text-4').css('font-size') == '60px');
```
2018-10-04 13:37:37 +00:00
2020-11-27 18:02:05 +00:00
Your `.text-5` class should have a `font-size` of 75px.
```js
assert($('.text-5').css('font-size') == '75px');
```
# --seed--
## --seed-contents--
2018-10-04 13:37:37 +00:00
```html
2020-05-09 14:31:18 +00:00
< style type = 'text/scss' >
2018-10-08 00:01:53 +00:00
2018-10-04 13:37:37 +00:00
< / 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 >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-10-04 13:37:37 +00:00
2019-04-30 23:55:22 +00:00
```html
2020-05-09 14:31:18 +00:00
< style type = 'text/scss' >
2019-05-01 14:08:38 +00:00
$x: 1;
@while $x < 6 {
.text-#{$x}{
font-size: 15px * $x;
}
2019-04-30 23:55:22 +00:00
$x: $x + 1;
2019-05-01 14:08:38 +00:00
}
2019-04-30 23:55:22 +00:00
< / 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 >
2018-10-04 13:37:37 +00:00
```