SCSS not converting to CSS

#1



https://www.codecademy.com/courses/learn-sass/projects/sass-bar-chart


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. 
<head>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
</body>

$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, $i*5/100);
        }@else if($i % 3 == 0){
            fade-out($pale-green, $i*5/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;
  }
}

#2

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!

#3

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