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

Lachlan ∆
Lachlan ∆
8,026 Points

Could somebody please explain this Sass code challenge?

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

4 Answers

Your answer is correct with the exception of the @include. Remove it and it should pass.

Also, you have an extra closing curly brace.

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

You have to interpolate the $make variable so that whatever is passed into that variable becomes the name of the class. You interpolate variables like so:

#{$variable_name}

The mixin should use the value of $make to create a new class. The new class should be labeled as the value of $make parameter.

to convert a parameter value into text you can use the #{/PARAMETER HERE/}.

example

$color: red;

.#{$color} {
  background: $color;
}

//WILL OUTPUT THE BELOW

.red {
  background: red;
}

I hope this helps.

Lachlan ∆
Lachlan ∆
8,026 Points

I've had multiple attempts but I get the following error :( "There's something wrong with your Sass stylesheet. Please review your code and try again. Sass Error: Invalid CSS after " }": expected selector or at-rule, was "}". " What am I doing wrong? Thanks for your help

 @mixin cars($make, $color) {

 .#{$make} {
  border: 1px solid black;
 }

  }  
}

@include cars(audi, black);