Day 30 of 100 Days Of Code

Image of buggy code

Day 30: August 23, Thursday

Today ‘s Progress: I started work on Introduction to the Sass Challenges I had completed a couple sections previously those were:

Thoughts: The Introduction to the Sass Challenges seem pretty buggy it makes a big difference to use Chrome. Firefox should work but in the last challenge I did I knew the code was correct based on Sass Validator results, but the unit tests failed, so I tried the same code in chrome and it passed I’m not sure what the issue was.

Resources used:

#Use @for to Create a Sass Loop(Passes in Chrome)
<style type='text/sass'>
  @for $j from 1 to 6 {
    .text-#{$j} {font-size: 10px * $j; }
   }  
</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>

To make it pass in Firefox… use:

#Use @for to Create a Sass Loop(Passes in Firefox)
<style type='text/sass'>
  @for $j from 1 to 6 {
    .text-#{$j} {font-size: 10px * $j; }
   }  
</style>

<p class="text-1" style="font-size:10px;">Hello</p>
<p class="text-2" style="font-size:20px;">Hello</p>
<p class="text-3" style="font-size:30px;">Hello</p>
<p class="text-4" style="font-size:40px;">Hello</p>
<p class="text-5" style="font-size:50px;">Hello</p>

This also was a frustrating challenge I worked pretty hard getting the tests to pass. Took changing browsers (I did find a way to get the tests to pass in Firefox by adding style to P tags).

Link(s) to work

  1. Started work on Introduction to the Sass Challenges.

Introduction to the Sass Challenges

  • PassedStore Data with Sass Variables
  • PassedNest CSS with Sass
  • PassedCreate Reusable CSS with Mixins
  • PassedUse @if and @else to Add Logic To Your Styles
  • PassedUse @for to Create a Sass Loop

All code is in GitHub and repl.it here: Sass meister Johnny’s gist or [FCC-introductionToTheSassChallenges.sass](https://github.com/Johnny2136/FCC-Projects/blob/Feature/FCC_Challenges/introductionToTheSassChallenges.sass

Written on August 23, 2018