Please help with this code challenge.

Leon;

You have a syntax error in your code. Sass interpolation has a syntax of # {}. Not # () as you have. In addition it seems you have some additional code.

The code for Task 2 needs to look similar to:

@mixin cars($make, $color) {
    .#{$make} {
      border: 1px solid black;
    }
}

If you look at the video around the 1:45 mark you will see the syntax needed.

Happy coding,

Ken

Leon;

No problem at all. That is what the forum is all about!

Task 3 asks us to: Add a background-image to the class. Append .png to the value stored in $color to form the file name.

Within our previously defined class we need to add something to the background-image property, right? And we are adding a file so we need to use the url("") value. Our code then goes to:

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

I'm sure you got that far. The interpolation seems to be where folks get stuck. Similar to Task 2, where we use the #{} notation for making our class name, we can interpolate the value of $color into the url value for the background-image property. We would do that by:

background-image: url("#{$color}");

We are also asked to append .png to the end of the $color value. This, therefore, sounds like we would have a bunch of .png files saved of various color names that we are using as our background image. Anyway, to append the .png we just type it in right after our interpolated string and prior to the closing quote. So our line of code for Task 3, which needs to be included with everything else, would be:

background-image: url("#{$color}.png");

Hope it helps and makes some sense.

Ken

You are on the right track, my friend.

Here's the instructions for Task 4:

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

First off, you need to move all of your Task 4 related code outside of the previous class & @mixin declarations. That will meet the requirements for the first part of the first sentence.

Second, to set the variable $time to the value of morning we would use

$time: morning;

Right now you are setting a variable $morning to a value of the variable $time with $morning: $time;.

Onto the meat of this challenge. We will be targeting the a tags so we need to select them and put our if/else directive inside that code block. I'll lay out the basics of this statement and let you have a go at completing it, okay? (Don't want to take all of the fun away from your SCSS experience ).

$time: morning;

a {
  @if $time == morning {
   // what happens if it is morning
  } @else if ??? {  // next condition goes here
   // what happens if it is the next condition
  } @else {
   // when all else fails, do this line of code
  }
}

Post back if you're still stuck.

Ken

Leon;

A couple of things first you need to move all of the code for Task 4 outside of the @mixin cars rule. Secondly in your @else if statement you have not created a proper if statement for this challenge. It needs to look like the conditional for $time == morning but with the different condition, $time == afternoon.

You should wind up then with two separate code blocks in your SASS:

@mixin cars ($make, $color) {

// mixin code here

}

a {

// Task 4 code here

}

Ken