SCSS not converting to CSS

[pt789]

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/learn-sass/projects/sass-bar-chart

<In what way does your code behave incorrectly? Include ALL error messages.>
Another problem with SCSS, dont know why this code isnt working. Nothing is shown in index and SCSS is not converting to CSS. Please help.

```

Replace this line with your code.

$top-foods: (“Sugar Cane” 1898),
(“Corn” 1017),
(“Rice” 738),
(“Wheat” 711),
(“Cow Milk” 635),
(“Potatoes” 374),
(“Vegetables” 279),
(“Soy Beans” 278),
(“Cassava” 263),
(“Sugar Beets” 247);

@each $food, $tons-produced in $top-foods{
$i: index($top-foods,($food $tons-produced));
rect:nth-child(#{$i + 1}){
height: #{$tons-produced}px;
@if($i % 2 == 0){
fade-out($sea-green, $i5/100);
}@else if($i % 3 == 0){
fade-out($pale-green, $i5/100);
}@else{
fade-out($diamond-blue, $i*5/100);
}

    &:before{
        content : $food;
    }
    &:after{
    content : $tons-produced + "m";
    }    
}

}

$diamond-blue: rgba(0, 159, 255, .6);
$sea-green: rgba(10, 165, 153, .6);
$pale-green: rgba(167, 240, 213, .6);
h1 {
font-family: ‘Montserrat’, sans-serif;
font-size: 18px;
padding-bottom: 20px;
color: #434444;
}

span {
display: block;
}

rect {
width: 24px;
float: left;
padding-left: 25px;
padding-top: 7px;
white-space: nowrap;
word-break: break-all;
position: relative;
bottom: 0px;
font-size: 12px;
color: #707070;
font-family: ‘Montserrat’, sans-serif;
&:before {
display: inline-block;
-webkit-transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
&:after {
position: absolute;
top: -15px;
left: 0px;
}
}

<do not remove the three backticks above>

[hayleytong]

Hi, I just came across this same problem! The @if statement should read :

@if($i % 2 == 0){
  background-color: fade-in($sea-green, $i*5/100);
} @else if($i % 3 == 0){
  background-color: fade-in($pale-green, $i*5/100);
} @else {
  background-color: fade-in($diamond-blue, $i*5/100);
}

The “Hint” code is missing the background-color property!