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

Sharon Smith
Sharon Smith
8,747 Points

Basic Sass Interpolating Code Challenge, Question 4-- What am I doing wrong?

OK, here's the question:

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.

The error I keep getting is "You need to define a $time variable and set it to: morning", which as near as I can tell, is what I'm doing. When I compiled the code using Sublime Text, it compiled to

a { color: red; }

Which I'm fairly sure is exactly what it's supposed to do. I'm sure it's something stupid but I've tried every way I can think of to code that variable & there's obviously something I'm missing somewhere.

Please help me before I punch through my laptop screen!

style.scss
/* Write your SCSS code below. */

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

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

a {
  @include morning(morning);
}

2 Answers

Hi Sharon,

This last part of the challenge isn't asking for a mixin so you don't need to worry about that. You could pass with a mixin I believe but it's not necessary. You are passing 'morning' into a mixin but it wants you to assign 'morning' to the $time variable.

$time: morning;

After that you could put your if/else directive inside the a rule:

$time: morning;

a {
  /* if/else directive in here */
}
Sharon Smith
Sharon Smith
8,747 Points

It worked! Thank you!

I'd tried it without the mixin a few different ways, but none of those seemed to work, either.

So, basically, it looks like I had everything reversed. I'm still not seeing how exactly this particular exercise follows from what was in the video. It doesn't look anything like the coding we worked on there, which looked like the first example with the car mixin. The only similar coding we did was the opposite of what they asked for here--set a bunch of options, then set which one we wanted inside the <div> tag, hence why I was styling it that way. I also don't understand why anyone would code like this. Why set a variable to one thing & then write a bunch of other options that aren't being used? Setting the options then choosing the one you want in that particular element- like the video- makes more sense to me.

Well, at least I got the code half-right. :-D

Aaron Martone
Aaron Martone
3,290 Points

Just got stuck on this due to the poor wording in the summary. I had legitimate code, but went through over 50+ failures simply because my @if/@else was in a mixin. It was stated in previous assignments that all code builds off the previous assignments, and the last referenced location was the 'background-image: url()' for the 3rd assignment. Placing this if/else check 'below' that (per the instructions) made it sound as if the check still needed to be in the mixin.

Frustrating that there's little clarification here when I knew the code being written as flawless.