Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Advanced Sass Concepts Interpolating and if/else

Matias Fernandez
Matias Fernandez
8,242 Points
Posted by Matias Fernandez
Matias Fernandez
8,242 Points

I'm getting "Bummer! The generated file needs to end with '.png'. " Not sure what I did wrong.

@mixin cars($make, $color) { 
    .#{$make} { 
        border: 1px solid black; 
            background-image: url("#{$color}.png");
  }
}

$time: "morning";

a {
  @if ($time == "morning") { color: red; }
  @else if ($time == "afternoon") { color: blue; }
  @else { color: gray; }
}

5 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Matias,

I found the problem, actually 2 problems:

  1. remove the quotes around the variable values

  2. remove the parens around the if tests: $if $time==morning

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Code looks fine. I built a pen to test it and it works for me: http://codepen.io/sawmac/collab/GKdeo

You might try the code challenge from the start and see if it isn't just some glitch in the way the Treehouse's testing engine works. For example, while quotes are valid for SASS variable values, you don't need them and the examples in the videos don't use them.

Matias Fernandez
Matias Fernandez
8,242 Points
Matias Fernandez
Matias Fernandez
8,242 Points

Thanks Dave, I'll give it a try.

Matias Fernandez
Matias Fernandez
8,242 Points
Matias Fernandez
Matias Fernandez
8,242 Points

That did it! Thank you! Is it acceptable to use parens and quotes for the if test and values outside of Treehouse?

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Good question Matias,

The code I plugged into this pen -- http://codepen.io/sawmac/collab/GKdeo -- uses the quotes around variables and the parens around ifs and it compiles just fine. I tried it on another online SCSS compiler and there were no errors. However I couldn't find any information on the official SASS docs http://sass-lang.com/documentation/file.SASS_REFERENCE.html

All of the examples I see do not use quotes around variable values nor do they use parens in the @if and @else if clauses. That's a bit confusing for programmers, I know.

Matias Fernandez
Matias Fernandez
8,242 Points
Matias Fernandez
Matias Fernandez
8,242 Points

Yeah, you're right. The SASS docs don't include parens, I probably shouldn't either. Thanks again Dave. You're awesome.