Need help with advanced Sass concepts

Question

Bummer! You need to define a $time variable and set its value to: morning

Stage 4 Advanced Sass Concepts

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

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Sass Basics - Code Challenge</title>
  <link rel="stylesheet" type="text/css" href="page-style.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="wrap">
    <h1>Hampton's Blog</h1>
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Hampton</a></li>
      <li><a href="#">Hampton's Work</a></li>
    </ul>
    <div class="entry">
      <h1>Delicious Food in SF</h1>
      <div class="content">
        <p>
          You know what my favorite restaurant in San Francisco is? The answer is that there are so many great restaurants that I couldn't choose one. But honorable mentions include Mr. Chow's, Live Sushi and Piccino. 
          <a href="/info.html">Read More</a>
        </p>
      </div>
    </div>
    <div class="entry">
      <h1>Great Music</h1>
        <div class="content">
          <p>
              Here are some of my favorite bands from years past and present: Belle and Sebastian, Pixies, and Daft Punk. Listening to music allows me to focus when I'm programming. 
            <a href="/info.html">Read More</a>
          </p>
        </div>
    </div>
  </div>
</body>
</html>

style.scss

/* Write your SCSS code below. */

@mixin cars($make, $color) {
  .#{$make} {
    border: 1px solid black;
    background-image: url("images/#{$color}.png");
     @if $time = morning {
      a {
      color: red;}
    }
     @if $time == afternoon {
     a {
     color: blue;}
  }
   @if else $time {
   a { color: gray;}
   }
   }
}

Answer 1 · 2014-12-20T03:20:56Z

December 20, 2014 3:20am

You're close, but there's a few areas where you are off, so hopefully this helps:

1) You have all your code within the mixin, based on the challenge the mixin should only include what's below and all other code should be placed below the mixin:

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

2) As part of the challenge, you are asked to define a time variable and assign it the value of morning, you appear to have skipped this step, following the closing bracket of the mixin you should have:

$time: morning;

From there, it's a matter of defining your if/else. However, you are currently doing an if/else check incorrectly. You have two if statements, and then an if/else statement. In reality, what you need is an if, else if, and else.

The challenge is saying "if time equals morning the color should be red" so that's your first if statement.

Next, it's saying "Else if the time is afternoon the color should be blue" so you use else if.

And then finally it's saying if time equals anything else that it should just be gray, so you use an else as your final piece.

Finally, you can do your full if/else statement within the 'a' element selector.

The final code would look like this, where the color of the 'a' element is being set based on the value of $time:

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

Answer 2 · 2014-12-22T02:43:06Z

December 22, 2014 2:43am

thanks

Welcome to the Treehouse Community

Looking to learn something new?

Kevin Jiang

Kevin Jiang

Need help with advanced Sass concepts

2 Answers

mikes02

mikes02

Kevin Jiang

Kevin Jiang