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 Petar Popovic
Petar Popovic
Courses Plus Student 23,421 Points

Advanced Sass Concepts - if/else

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

/* 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;
        }
    }

}

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

Petar Popovic
Petar Popovic
Courses Plus Student 23,421 Points

Finally I got an answer, just needed to think a little, and it is so simple and stupid :p

The problem was because I put variable $time: morning and everything else inside the @mixin cars($make,$color) and the right way is outside, like the task says Underneath the previous code!

So this is the correct code

/* 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;
    }
}
Christopher Aporta
Christopher Aporta
24,258 Points

Hey Petar Popovic!

I'm glad you found the answer! Thanks for providing your process and solution below - it would actually be an even bigger help if you could revert the code in your original question above to reflect the problem you encountered. At the moment both the question and answer are the same valid solution - it would be much easier for anyone who runs into trouble later on to see the invalid code above, and the valid code below.

Thanks!

Chris

Petar Popovic
Petar Popovic
Courses Plus Student 23,421 Points

Hey Christopher :)

First of all thanks for replay.

If you look carefully you will see that I did just that. The code above is invalid and you can't pass the task by using it. The code below is valid.

One advice to all students: Read carefully what task says (This can be a slight problem if english is not your native language and you are not fluent like me, I know)

Thank you again! I am happy to see that treehouse community is so supportive, just like the awesome support team that threehouse have :)

Cheers

2 Answers

Christopher Aporta
Christopher Aporta
24,258 Points
Christopher Aporta
Christopher Aporta
24,258 Points

Hey Petar,

You're right! The code on the top was invalid -- what threw me off was that the curly brace indentations were a little funky. I modified them for better readability. Great job & happy coding!

Chris

MUZ140595 Dingani Masikondo
MUZ140595 Dingani Masikondo
14,348 Points
MUZ140595 Dingani Masikondo
MUZ140595 Dingani Masikondo
14,348 Points

/* Write your SCSS code below. / / Tried the above, it did nit work and had to make the following modifications for it to wor: 1 $time: morning; the semicolon was missing; 2 color instead of $color*/

@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; } }