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
Florian Uhlig
2,518 PointsAdvanced 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
2,518 Pointsnevermind...the issue was quotes around the variable value
-- solved --
Florian Uhlig
2,518 PointsThe 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
27,969 PointsGreat, thanks
Tim Ruby
Courses Plus Student 19,038 PointsUpdated!! 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
39,124 PointsI solved this way.
$time: morning; @if $time == morning { a { color: red;} } @else if $time == afternoon { a { color: blue;} } @else { a { color: gray;} }
Robert Achu
17,155 PointsI 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
27,969 PointsHave you forgotten $time = morning;
Robert Achu
17,155 PointsNo, I defined the variable 'above.'
Robert Achu
17,155 PointsBAHH! forgot semi-colon, thanks for the suggestion JohnW.
Chris Shaw
26,676 PointsCould you please post your entire answer as your IF/ELSE IF logic is correct but it sounds like the variable isn't.
Robert Achu
17,155 PointsSolved forgot semi-colon at end of variable.
Jonas Lomholdt
7,891 PointsI 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
26,676 PointsSeems to be working just fine on sassmeister.com, what happens when you try to use that code?
Petar Popovic
Courses Plus Student 23,421 PointsI 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
26,676 PointsHi 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
Courses Plus Student 23,421 PointsYes 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
John Wheal
27,969 PointsJohn Wheal
27,969 PointsI've got the same problem. Could you elaborate on your fix?
Chris Shaw
26,676 PointsChris Shaw
26,676 PointsYou 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.