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

Nathan Clevenger
PLUS
Nathan Clevenger
Courses Plus Student 17,759 Points

If/Else in Sass

Can someone help me figure out what I'm doing wrong? My code passed on the first three steps, but after writing code for the 4th, the third step is no longer passing (The generated file name needs to end with '.png'.) I'm also pretty sure I'm not assigning the variable correctly for a string, but $time = "morning"; didn't seem to work. Thanks!


Underneath the previous code, store the value "morning" in a variable named $time. Then write an if/else directive that will color all <a> tags. If the variable $time is equal to "morning", the color should be red. Otherwise, if the variable is "afternoon", the color should be blue. Finally, if the variable is set to anything else, the color should be gray.

Bummer! The generated file name needs to end with '.png'.

/* Write your SCSS code below. */
@mixin cars($make, $color) {
    .#{$make} {
    border: 1px solid black;
    background-image: url("img/#{$color}.png");
  }
  .#{$color}    {
    .png {

    }
  }
}

@mixin $time("morning") {}

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

7 Answers

Chase Lester
Chase Lester
10,972 Points

You need to store the value "morning" in a variable named $time, not a mixin. Try this:

$time: morning;
a {
  @if $time == morning {
    color: red;
  } @else if $time == afternoon {
    color: blue;
  } @else {
    color: grey;
  }
}
Nathan Clevenger
Nathan Clevenger
Courses Plus Student 17,759 Points

Really enjoyed your course! Great work, Sass is pretty amazing.

Scott Buendia
Scott Buendia
15,415 Points

Hey there,

Thought I'd chime in here for anyone who has problems with this later. I just got through with the questionnaire and I answered the same as everyone else here, however, it would not take my answer for some reason. First off it told me something to the effect, "$time" should be set to equal "morning". I had $time: morning; I went through the forums and checked my answers against other peoples' and it was the exact same to the character of other peoples' codes. I even pasted other peoples answers into my code challenge to see if it was a bug or if it was just something I was missing. It still would not take it. I decided to test the code as I went along by submitting each step as I completed it because Sass was built in Ruby according to the videos. So, I tried to "RSPEC" it by testing the code for failures as I went along. Basically, I got it to work by validating my code as I went along. IE. $time: morning; then submit. It says, "you need @if statement." Etc. It finally accepted my work after going step by step. I hope that helps someone in the future.

it's true

$time: morning; a { @if $time == morning { color: red; } @else if $time == afternoon { color: blue; } @else { color: grey; } }

Scott Buendia
Scott Buendia
15,415 Points

Hey there,

Thought I'd chime in here for anyone who has problems with this later. I just got through with the questionnaire and I answered the same as everyone else here, however, it would not take my answer for some reason. First off it told me something to the effect, "$time" should be set to equal "morning". I had $time: morning; I went through the forums and checked my answers against other peoples' and it was the exact same to the character of other peoples' codes. I even pasted other peoples answers into my code challenge to see if it was a bug or if it was just something I was missing. It still would not take it. I decided to test the code as I went along by submitting each step as I completed it because Sass was built in Ruby according to the videos. So, I tried to "RSPEC" it by testing the code for failures as I went along. Basically, I got it to work by validating my code as I went along. IE. $time: morning; then submit. It says, "you need @if statement." Etc. It finally accepted my work after going step by step. I hope that helps someone in the future.

Joshua Bambrick
Joshua Bambrick
613 Points

There are a couple other answers in the forum explaining the solution to this problem. The code submitted above works. However, the problem I was having and is that I was writing the code in the mixin and not below it. Try again with your @if statement outside of the mixin. Here is a link to the solution someone else described: https://teamtreehouse.com/community/ive-followed-the-instructions-but-i-get-an-error-the-color-should-be-red