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
Kevin Enloe
12,438 PointsStuck on creating an if/else statement in the code challenge
I am very new to Sass and programming so I am kinda lost. The question is "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."
I have done my best and am lost as to what I am missing now. Here is the code I have created that is not working (says it has a compilation error)
@mixin cars ($make, $color){
.#{$make}{
border: 1px solid black;
background-image:url("#{$color}.png");
}
}
//below refers to the current question
$time:morning;
@mixin time_of_day($time){
@if $time == morning {
a {
color:red;
}
}
@else if $time == afternoon {
a {
color:blue;
}
}
@else {
a {
color:grey;
}
}
}
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Kevin,
I don't get a compilation error with your code. I get a message indicating the color wasn't set to red.
This part of the challenge isn't asking for a mixin but if you do include the mixin then your code will pass.
@include time_of_day($time);
As mentioned though, it doesn't want a mixin for this part and you also have some duplication in your code that you should try to remove. Imagine at some point you need to change the a selector to something else. You have 3 places where you need to change that.
The if/else directive can be nested inside the a rule to remove this duplication.
$time:morning;
a {
@if $time == morning {
color:red;
}
@else if $time == afternoon {
color:blue;
}
@else {
color:grey;
}
}
Gavin Eyquem
Front End Web Development Techdegree Student 19,065 PointsWhere am I going wrong, please?
$time:morning; a { @if $time == morning{ color:red; }
@else if $time == afternoon{
color:blue;
}
@else {
color:grey;
}
}
Jason Anello
Courses Plus Student 94,610 PointsDo you have it below the cars mixin?
Gavin Eyquem
Front End Web Development Techdegree Student 19,065 PointsHi Jason,
I missed that small bit of detail, so thank you.
Kevin Enloe
12,438 PointsKevin Enloe
12,438 Pointsoh wow, I didn't even think about nexting it in the a........thanks for the pointers and the help!