where am i getting it wrong..it seems correct to me..

Question

Challenge Task 3 of 4

Add a background-image to the class. Append .png to the value stored in $color to form the file name.

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");

Answer 1 · 2015-08-29T22:18:17Z

August 29, 2015 10:18pm

Hey there,

You are doing good, you just need to correct the syntax of your code. The background-image class code should be inside the @mixin's curly braces, and then you close it! The code will be like this:

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

*In my code my url path started with img, while yours started with image. Both are correct it depends on you file name that you will get your image from. The common file name is img!

Thanks & happy coding

Wameedh

Answer 2 · 2015-04-09T14:09:27Z

April 9, 2015 2:09pm

Hi there,

You're very close. Turns out it's a parsing issue (the positioning of the curly braces/how the code is enclosed.)

/* Write your SCSS code below. */
@mixin cars ($make, $color) { .#{$make}{ border: 1px solid black; }
background-image:url("images/#{$color}.png"); }

Hope this helps.

Welcome to the Treehouse Community

Looking to learn something new?

MUZ140018 Sibusisosenkosi Moyo

MUZ140018 Sibusisosenkosi Moyo

where am i getting it wrong..it seems correct to me..

2 Answers

Wameedh Mohammed Ali

Wameedh Mohammed Ali

Chase Marchione

Chase Marchione