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 stevencooper
stevencooper
5,755 Points

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;
  }
}
stevencooper
stevencooper
5,755 Points

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
Nicholas D'Amico
.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;
    }
}
stevencooper
stevencooper
5,755 Points
stevencooper
stevencooper
5,755 Points

thanks to both of you for your help.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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_

stevencooper
stevencooper
5,755 Points

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.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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.