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

Posted by Petr Holusa
Petr Holusa
Courses Plus Student 4,041 Points

I don't quiet understand what I'm doing wrong with if/else

Hi,

the first code went ok, but last the second one $time I don't get it. Please, any hints?

Thank you :)

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

@mixin a($time) {
    @if $time == {content: "morning" ;} {
        color: red;
        } 
    @else if $time == {content: "afternoon" ;} {
        color: blue;
        }
     @else {
        color: grey; 
        }
    }
}
kevinhottinger
kevinhottinger
10,569 Points

Your 

color blue;

Should be

color: blue;
Petr Holusa
Petr Holusa
Courses Plus Student 4,041 Points

---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.

Still nothing. It says I have to define $time variable so I'm lost. :(

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You don't need to put the $time and @if stuff in another mixin, you just put it outside, and check the value of $time:

$time: morning;
@if $time == morning {
  // make links red here
}
Petr Holusa
Petr Holusa
Courses Plus Student 4,041 Points

Thanks for your help but I still missing something. I guess that "a" element but I don't have a clue where to put it :(( I was following the instructions 

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

$time: morning;
  @if $time == morning {
    color:red;
  } @else if $time == afternoon {
    color:blue;
  } @else {
    color:grey;
  }
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Ahh, sorry yes, just drop your whole conditional (@if, @else, etc) inside your selector for links:

$time: morning;
a {
  @if $time == morning {
    //etc
  }
}
Petr Holusa
PLUS
Petr Holusa
Courses Plus Student 4,041 Points
Petr Holusa
Petr Holusa
Courses Plus Student 4,041 Points

Oh fantastic! Now I finally understand this.... I hope... :D

Makes more sense to me. Thank you very much!