Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics (retired) Advanced Sass Concepts Interpolating and if/else

How do you make a mixin variable value to set the name of a new class?

the directions: "The mixin should use the value in $make as the name of a new class. The class should have a 1px solid black border."

The section on mixins didn't cover using variable values as classes.

What I thought was the correct syntax is not right, as i get the error message: "Bummer! The mixin needs to use one of the mixin parameters to make the class name."

Here's what I am trying to work with:

@mixin cars($make, $color) {
[put class here] {
    border: 1px solid black;
     }
}

so, how does one make a mixin variable into a class? I've looked scss mixins section of the course and just can't seem to come up with the right answer.

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

this darn thing didn't post the way it's supposed to. None of the HTML was supposed to post, My question is the top line of the HTML. The incomplete example of what i'm trying to do is in text above the box containing the HTML & my question. The bottom box of style.scss code came from ?? too, since i didn't include it in my post.

Maybe a mod can fix the darn thing. Thanks for your help & sorry for the mess. I tried the code markup and it didn't seem to work right. Like i said, I didn't put the 3 ``` marks around the html, so i don't know why it was included.

3 Answers

Nicholas D'Amico
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nicholas D'Amico
Front End Web Development Techdegree Graduate 25,692 Points

Hey Steven, I hope I can help you. To create a class from your $make variable you use the syntax .#{$make}. Everything else in your code looks good!

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

thanks to both of you for your help.

Hi Steven,

You're on the right track there but when you want to use sass variables in a css selector or property you have to use interpolation.

See the examples here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

Thanks for the reference, but the damn thing does not cover the answer to my challenge. The section on mixins didn't cover using variable values as classes and how to interpolate them. It's not covered in the darn video, and I've watched it several times and am still lost.

Hi Steven,

I gave a link to the docs because I didn't remember where it was at in the videos.

The first example in the interpolation section of the docs shows how to do the syntax for interpolation.

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

In this example they're trying to create the selector p.foo using the $name variable.

It shows the syntax here: p.#{$name}

You have to wrap the variable in curly braces and then put a # in front of the left curly brace. Then you'll be able to use sass variables in css selectors.