Apply a Style Until a Condition is Met with @while works in mozilla

The challenge involves a 5px font size which chrome doesn’t support, the least seems to be 6px. There’s good news though as it works in Mozilla 45.0.2.

Your code so far

<style type='text/sass'>
$i: 1;
$fontsize: 5px;
 @while $i < 11 {
  .text-#{$i} {font-size: #{$fontsize * ($i)};}
$i: $i+1;



<p class="text-1" id="text1">Hello</p>
<p class="text-2" id="text2">Hello</p>
<p class="text-3" id="text3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
<p class="text-6">Hello</p>
<p class="text-7">Hello</p>
<p class="text-8">Hello</p>
<p class="text-9">Hello</p>
<p class="text-10">Hello</p>
<p>Click the button to get the computed font size for the first letter in the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p>The computed font size for div::first-letter in the test div is: <span id="demo"></span></p>
function myFunction(){
  var elem = document.getElementById("text1");
  var theCSSprop = window.getComputedStyle(elem, "first-letter").getPropertyValue("font-size");
  document.getElementById("demo").innerHTML = theCSSprop;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36.

Link to the challenge:

What is your question?

This is an observation really.

Yes, it is a known bug with the current challenge. I fixed the challenge in a pull request last month but the master branch of the repo has not been deployed with the fix. I changed the starting size of the text to be 15px instead of 5px to avoid this issue.

oh…cool, thanks for your response

are there any more bugs I should know about ?

In the SASS challenges or challenges in general? 99% of the reported bugs have been fixed, but not deployed to production (which we are hoping to be done in the near future). There are a few, but this particular one was unique because of the font-size issue with Chrome.

Thanks for your time Randell.