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

Posted by Florian Uhlig
Florian Uhlig
2,518 Points

Advanced Sass Concepts (Stage 4)

challenge 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. Else, if the variable is "afternoon", the color should be blue. Finally, if the variable is set to anything else, the color should be gray

$time: 'morning';

a {

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

}

Error: Bummer! You need to define a $time variable and set its value to: morning

the code works (tested in preview and on codepen+sassmeister)

9 Answers

Florian Uhlig
Florian Uhlig
2,518 Points

nevermind...the issue was quotes around the variable value

-- solved --

John Wheal
John Wheal
27,969 Points

I've got the same problem. Could you elaborate on your fix?

Chris Shaw
Chris Shaw
26,676 Points

You simply just write the words as the variable value, for example

incorrect $time: 'morning'

whereas

correct $time: morning;

This is because the compiler has no typecasting, it simply assumes that one value is equal to the other allowing for a simple does this match this evaluation.

Florian Uhlig
Florian Uhlig
2,518 Points
Florian Uhlig
Florian Uhlig
2,518 Points

The problem was that the time values (morning, afternoon) were in quotes cause I thought they had to be because of their type (strings). But that's not the case so just take the code and unquote the time values

John Wheal
John Wheal
27,969 Points

Great, thanks

Tim Ruby
PLUS
Tim Ruby
Courses Plus Student 19,038 Points
Tim Ruby
Tim Ruby
Courses Plus Student 19,038 Points

Updated!! Variable was off and I overlooked it... Thanks anyway!

my code was

$time: morning;

a {

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

}

but I am still getting the error: "Bummer! The code should be set to red."

I have my semi-colon, no '' on the strings so I am really not sure why this isn't working? Am I overlooking something?

James Whiting
James Whiting
39,124 Points
James Whiting
James Whiting
39,124 Points

I solved this way.

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

Robert Achu
Robert Achu
17,155 Points
Robert Achu
Robert Achu
17,155 Points

I am still getting Bummer! The color should be set to red. with this code:

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

Any ideas?

John Wheal
John Wheal
27,969 Points

Have you forgotten $time = morning;

Robert Achu
Robert Achu
17,155 Points

No, I defined the variable 'above.'

Robert Achu
Robert Achu
17,155 Points
Robert Achu
Robert Achu
17,155 Points

BAHH! forgot semi-colon, thanks for the suggestion JohnW.

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Could you please post your entire answer as your IF/ELSE IF logic is correct but it sounds like the variable isn't.

Robert Achu
Robert Achu
17,155 Points

Solved forgot semi-colon at end of variable.

Jonas Lomholdt
Jonas Lomholdt
7,891 Points
Jonas Lomholdt
Jonas Lomholdt
7,891 Points

I tried the code below following the sass documentation for reference, but it didn't work.

Can anyone figure out why?

@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;
    }
}
Chris Shaw
Chris Shaw
26,676 Points

Seems to be working just fine on sassmeister.com, what happens when you try to use that code?

Petar Popovic
PLUS
Petar Popovic
Courses Plus Student 23,421 Points
Petar Popovic
Petar Popovic
Courses Plus Student 23,421 Points

I can't figure out what is wrong here, please help :p I got this message "Bummer! The color should be set to red"

/* Write your SCSS code below. */
@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: grey;
  }
}

}
Chris Shaw
Chris Shaw
26,676 Points

Hi Petar,

In the future could you please create your own post to avoid clutter.

As for your question, you're simply missing the semi-colon from your $time variable which is a requirement of Sass.

$time: morning;

Happy coding!

Petar Popovic
Petar Popovic
Courses Plus Student 23,421 Points

Yes of course Chris Upjohn .

I did just that after https://teamtreehouse.com/forum/advanced-sass-concepts-ifelse but forgot to delete this post here.

Sorry and thanks