Loop condition of present variable

HTML-CSS
1

The same loop condition as from the example workds
$x < 13
$x < 6 could work to fit all five text elements. It might be possible to say as long as there is text. How would I say that?
@while $x


<style type='text/scss'>
$x: 1;
@while $x < 13 {
.text-#{$x} {
    font-size: 15px * $x;
}
$x: $x + 1;
}

</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>

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36 Edg/88.0.705.81.

Challenge: Apply a Style Until a Condition is Met with @while

Link to the challenge:

2

I’m not sure I understand the question.

3

Only looping while there’s text elements is not possible as far as I know, CSS (or SCSS) cannot read the DOM and count elements, you’d need JavaScript for that.

It’s possible that I’m wrong, and someone comes up with some extreme wizardry involving nth-child selectors and other pseudo classes, though.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.